feat(timeline): sticky header strip + unboxed timeline by chiptus · Pull Request #241 · chiptus/UpLine

chiptus · 2026-07-25T12:51:18Z

Lifts the date band + hour scale out of the horizontal scroller into a sticky strip below the toolbar, synced to horizontal scroll via translateX(-scrollLeft), with a constant opaque background. The timeline drops its framing panel so it uses the full content width.

Builds on #233 (base branch). Closes #234.

Verification

Open the Timeline view and scroll down through stages; the date band + hour scale stay pinned and readable.
Scroll horizontally; the pinned header strip tracks the sets under it without lag or misalignment.
Confirm the header strip keeps a solid background — set blocks never show through it while scrolling.
Confirm the timeline has no surrounding framing panel and spans the full content width.

Generated by Claude Code

vercel · 2026-07-25T12:51:24Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
upline	Ready	Preview, Comment	Jul 25, 2026 5:22pm

qodo-code-review · 2026-07-25T12:51:25Z

Qodo reviews are paused for this user.

Troubleshooting steps vary by plan Learn more →

On a Teams plan?
Reviews resume once this user has a paid seat and their Git account is linked in Qodo.
Link Git account →

Using GitHub Enterprise Server, GitLab Self-Managed, or Bitbucket Data Center?
These require an Enterprise plan - Contact us
Contact us →

chiptus · 2026-07-25T14:39:33Z

closing as base branch was deprecated

qodo-code-review · 2026-07-25T14:42:03Z

Qodo reviews are paused for this user.

Troubleshooting steps vary by plan Learn more →

On a Teams plan?
Reviews resume once this user has a paid seat and their Git account is linked in Qodo.
Link Git account →

Using GitHub Enterprise Server, GitLab Self-Managed, or Bitbucket Data Center?
These require an Enterprise plan - Contact us
Contact us →

Copilot

Pull request overview

This PR updates the Schedule “Timeline” layout so the date band + hour scale live in a sticky header strip outside the horizontal scroller, synced via translateX(-scrollLeft), and removes the framing panel so the timeline can span the full width. It also introduces shared sticky layout constants intended to unify sticky offset calculations.

Changes:

Adds a sticky, horizontally-synced header strip in TimelineContainer and refactors TimeScale into a pure layout component (no scroll listeners).
Adjusts sticky offset handling for schedule chrome via new src/lib/layout-constants.ts.
Removes the “boxed” framing wrapper around the timeline and tweaks spacing for stage labels.

Reviewed changes

Copilot reviewed 8 out of 8 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
src/pages/EditionView/tabs/ScheduleTab/ScheduleNavigation.tsx	Makes the Schedule view switcher sticky below the top bar.
src/pages/EditionView/tabs/ScheduleTab/horizontal/TimeScale.tsx	Simplifies the time scale to be a pure render of date + hour labels.
src/pages/EditionView/tabs/ScheduleTab/horizontal/TimelineToolbar.tsx	Changes the toolbar sticky offset to depend on “below switcher” constants.
src/pages/EditionView/tabs/ScheduleTab/horizontal/TimelineContainer.tsx	Introduces the sticky header strip and scroll-left mirroring; adjusts timeline spacing.
src/pages/EditionView/tabs/ScheduleTab/horizontal/Timeline.tsx	Removes the surrounding panel (“unboxed timeline”).
src/pages/EditionView/tabs/ScheduleTab/horizontal/StageLabels.tsx	Updates vertical positioning to match the new header/layout.
src/lib/layout-constants.ts	Adds shared sticky offset constants for top bar / switcher / timeline toolbar.
CONTEXT.md	Updates domain language (“Schedule” is presented via Now/Timeline/List).

Comments suppressed due to low confidence (1)

src/pages/EditionView/tabs/ScheduleTab/horizontal/TimelineContainer.tsx:117

The header strip background uses bg-gray-900/95, which is not fully opaque. The acceptance criteria requires the strip to have a constant opaque background so set blocks never show through while scrolling.

      <div
        className="sticky z-30 overflow-hidden bg-gray-900/95 backdrop-blur-md"
        style={{ top: headerStripTop }}

…stants The view switcher now docks below the fixed top bar instead of scrolling behind it. Adds a shared layout-constants module so sticky bars derive their offsets from one source (top-bar height) instead of scattered magic numbers; the timeline toolbar and list day header build on this in follow-up PRs. Refs #231, #233. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_011MJJ4etMSZmx916fNiyzqF

…ox timeline Lifts the date band + hour scale out of the horizontal scroller into a sticky strip below the toolbar, synced to horizontal scroll via translateX(-scrollLeft), with a constant opaque background. The timeline itself drops its framing panel so it uses the full content width. Refs #231, #234. Builds on #233 (shared layout constants). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_011MJJ4etMSZmx916fNiyzqF

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_011MJJ4etMSZmx916fNiyzqF

The Now/Timeline/List switcher was made sticky in a prior pass, but the #231 spec and #233 both explicitly require it to stay non-sticky and scroll away with content. Reverts that and has the timeline toolbar and header strip dock directly below the fixed top bar instead of below the switcher. Refs #231, #234.

The header-strip translateX synced off a scrollLeft that started at 0 and only updated on the next native scroll event, so it could render misaligned for a moment after useTimelineScrollSync's mount-time scroll. Reads the container's actual scrollLeft in a layout effect that runs after that sync instead. Refs #234.

The date-band refactor for the sticky header strip dropped the per-day purple background bar, leaving plain floating text. Since the whole strip is now sticky (no more need for the old JS-driven pinned-label trick), render the date directly inside a solid per-day bar again. Refs #234.

… overlap Three follow-up fixes from visual QA against main: - The toolbar's real rendered height (63px) was larger than the TIMELINE_TOOLBAR_HEIGHT_PX constant (52px) used to position the header strip below it, so the strip crept up under the toolbar. Corrected the constant to match. - The date-band refactor dropped the original pinned-current-day-label behavior (label stays at the strip's left edge while scrolling through a day, fading over to the next day's label as its boundary nears). Restored it by passing the already-tracked scrollLeft down to TimeScale instead of having it track scroll itself. - Stage labels overlapped their own row's sets, because the row stack's top margin no longer left room for a label above each row once TimeScale moved out of the scrolling content. Reworked the label stack to sit in the blank gap directly above each row (mirroring the row stack's own spacing) instead of overlapping the row's cards. Refs #234.

… header strip Removing overflow-y-hidden from the scroll container lets position: sticky work relative to the page scroll directly, so TimeScale no longer needs a translateX(-scrollLeft) mirror or a scrollLeft prop - it goes back to tracking its own scroll container internally, same as on main.

…ring for header strip" This reverts commit 4dc3df8.

…iner

Copilot

Pull request overview

Copilot reviewed 9 out of 9 changed files in this pull request and generated 2 comments.

Comments suppressed due to low confidence (1)

src/pages/EditionView/tabs/ScheduleTab/horizontal/TimeScale.tsx:45

When the day changes, timeSlot may be after the actual timezone midnight (e.g. half-hour offset timezones), so position will be late and the date band will drift. Compute the boundary from ${currentDate}T00:00:00 in the festival timezone instead.

        changes.push({
          date: timeSlot,
          position: timeToOffset(timeSlot, timeSlots[0]),
        });
      }

Replace useIsMobile (false on first render, causing a desktop-offset flash on mobile) with a responsive Tailwind class for the header strip's sticky top, and drop the 95%-opacity/backdrop-blur background for a fully opaque one so set blocks never show through while scrolling, per PR review feedback on #241.

chiptus · 2026-07-25T17:22:05Z

Fixed in cdc9d6e — dropped useIsMobile in favor of a responsive Tailwind class (HEADER_STRIP_TOP_CLASS, matching the existing STICKY_TOP_BELOW_TOP_BAR_CLASS pattern) so there's no first-render offset flash on mobile, and switched the strip background from bg-gray-900/95 backdrop-blur-md to fully opaque bg-gray-900.

Generated by Claude Code

chiptus · 2026-07-25T17:22:26Z

Agreed this is out of scope for this PR — tracked as a follow-up in #248.

Generated by Claude Code

vercel Bot deployed to Preview July 25, 2026 13:00 View deployment

chiptus changed the base branch from claude/233-sticky-toolbar-layout-constants to main July 25, 2026 14:38

chiptus requested a review from Copilot July 25, 2026 14:38

Copilot started reviewing on behalf of chiptus July 25, 2026 14:39 View session

chiptus closed this Jul 25, 2026

chiptus reopened this Jul 25, 2026

Copilot AI reviewed Jul 25, 2026

View reviewed changes

vercel Bot deployed to Preview July 25, 2026 14:43 View deployment

vercel Bot deployed to Preview July 25, 2026 14:44 View deployment

vercel Bot deployed to Preview July 25, 2026 14:55 View deployment

vercel Bot deployed to Preview July 25, 2026 15:04 View deployment

vercel Bot deployed to Preview July 25, 2026 15:25 View deployment

claude added 9 commits July 25, 2026 15:33

refactor(timeline): trim TimeScale comment to non-obvious behavior only

7380a74

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_011MJJ4etMSZmx916fNiyzqF

Revert "refactor(timeline): use native sticky instead of scroll-mirro…

f46eb4d

…ring for header strip" This reverts commit 4dc3df8.

chiptus force-pushed the claude/234-sticky-timeline-header branch from 4dc3df8 to f46eb4d Compare July 25, 2026 15:34

vercel Bot deployed to Preview July 25, 2026 15:34 View deployment

chiptus commented Jul 25, 2026

View reviewed changes

claude added 2 commits July 25, 2026 16:04

refactor(timeline): use cn for toolbar className

c8ac5a3

refactor(timeline): drop stale comment, center stage labels

12625fd

claude added 4 commits July 25, 2026 16:04

refactor(timeline): extract useScrollLeft hook and TimeScaleContainer

c0f6505

docs(timeline): trim TimeScale comment to non-obvious behavior

734f112

style(timeline): round bottom corners of header strip

e8b01d1

refactor(schedule): drop own padding, rely on parent's spacing

72cc830

vercel Bot deployed to Preview July 25, 2026 16:06 View deployment

chiptus commented Jul 25, 2026

View reviewed changes

Comment thread src/pages/EditionView/tabs/ScheduleTab/horizontal/TimelineContainer.tsx Outdated

Comment thread src/pages/EditionView/tabs/ScheduleTab/horizontal/useScrollLeft.ts Outdated

docs(layout-constants): note toolbar height is measured, not derived

216eb17

vercel Bot deployed to Preview July 25, 2026 16:51 View deployment

docs(layout-constants): reference components, trim measurement note

34192b1

vercel Bot deployed to Preview July 25, 2026 16:53 View deployment

claude added 2 commits July 25, 2026 16:57

refactor(timeline): move header strip offset calc into TimeScaleConta…

00945f5

…iner

docs(useScrollLeft): convert to JSDoc for hook consumers

e5fd7b4

vercel Bot deployed to Preview July 25, 2026 16:58 View deployment

chiptus requested a review from Copilot July 25, 2026 16:59

Copilot started reviewing on behalf of chiptus July 25, 2026 16:59 View session

chiptus mentioned this pull request Jul 25, 2026

Refactor TimeScale.tsx: split date-band math, label geometry, and rendering #244

Open

4 tasks

Copilot AI reviewed Jul 25, 2026

View reviewed changes

Comment thread src/pages/EditionView/tabs/ScheduleTab/horizontal/TimeScaleContainer.tsx

Comment thread src/pages/EditionView/tabs/ScheduleTab/horizontal/TimeScale.tsx

chiptus mentioned this pull request Jul 25, 2026

Timeline date-band boundaries drift for non-hour-offset festival timezones #248

Open

2 tasks

vercel Bot deployed to Preview July 25, 2026 17:22 View deployment

chiptus merged commit 2353638 into main Jul 25, 2026
6 checks passed

chiptus deleted the claude/234-sticky-timeline-header branch July 25, 2026 17:27

Conversation

chiptus commented Jul 25, 2026

Verification

Uh oh!

vercel Bot commented Jul 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

qodo-code-review Bot commented Jul 25, 2026

Qodo reviews are paused for this user.

Uh oh!

chiptus commented Jul 25, 2026

Uh oh!

qodo-code-review Bot commented Jul 25, 2026

Qodo reviews are paused for this user.

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

chiptus commented Jul 25, 2026

Uh oh!

chiptus commented Jul 25, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

vercel Bot commented Jul 25, 2026 •

edited

Loading