Skip to content

Use --top-nav-height CSS variable for sticky positioning#3250

Merged
rossnelson merged 1 commit intomainfrom
fix/sticky-nav-css-variable
Mar 25, 2026
Merged

Use --top-nav-height CSS variable for sticky positioning#3250
rossnelson merged 1 commit intomainfrom
fix/sticky-nav-css-variable

Conversation

@rossnelson
Copy link
Copy Markdown
Collaborator

@rossnelson rossnelson commented Mar 25, 2026

Summary

  • Introduces a --top-nav-height CSS variable in :root (defaults to 3rem / 48px) alongside existing layout variables (--panel-*)
  • Replaces hardcoded top-12 with top-[var(--top-nav-height)] in all sticky sub-headers: event history toolbar, timeline toolbar, banner, and workflow family tree
  • Enables cloud-ui to override the offset (e.g. --top-nav-height: 0px) when its top nav is fixed outside the scroll container, such as when the projects nav is enabled

Context

When cloud-ui's projects nav is enabled, the top navigation becomes fixed outside #content-wrapper. The hardcoded md:top-12 on sticky elements creates a 48px gap between the fixed nav and the sticky sub-headers. This change makes the offset configurable via CSS variable so cloud-ui can set it appropriately.

Test plan

  • Verified localhost sticky nav still works (gap: -1px, flush)
  • Lint passes (pnpm lint)
  • Type check passes (pnpm check)
  • Cloud-ui follow-up PR to set --top-nav-height: 0px when projects nav is enabled

@rossnelson
Use --top-nav-height CSS variable for sticky element positioning
52173b2 
Replace hardcoded `top-12` with `var(--top-nav-height)` so cloud-ui
can override the offset when its top nav is fixed outside the scroll
container (e.g. when the projects nav is enabled).
@rossnelson rossnelson requested review from a team and rossedfort as code owners March 25, 2026 14:54
@vercel
Copy link
Copy Markdown

vercel bot commented Mar 25, 2026 •
edited
Loading

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

Project Deployment Actions Updated (UTC)
holocene Ready Ready Preview, Comment Mar 25, 2026 2:55pm

Request Review

@temporal-cicd
Copy link
Copy Markdown
Contributor

temporal-cicd bot commented Mar 25, 2026

Warnings
⚠️

📊 Strict Mode: 10 errors in 4 files (0.9% of 1080 total)

src/lib/components/workflow/relationships/workflow-family-tree.svelte (2)
  • L48:8: Type 'string | null | undefined' is not assignable to type 'string'.
  • L49:8: Type 'string | null | undefined' is not assignable to type 'string | undefined'.
src/lib/holocene/banner/banner.svelte (1)
  • L63:13: Type 'null' is not assignable to type '"action" | "activity" | "add-square" | "add" | "apple" | "archives" | "arrow-down" | "arrow-left" | "arrow-up" | "arrow-right" | "ascending" | "astronaut" | "batch-operation" | ... 133 more ... | "xmark-square"'.
src/lib/layouts/workflow-history-layout.svelte (3)
  • L197:10: Type 'boolean | null' is not assignable to type 'boolean | undefined'.
  • L238:2: Type 'string | undefined' is not assignable to type 'string'.
  • L239:2: Type 'string | undefined' is not assignable to type 'string'.
src/lib/layouts/workflow-timeline-layout.svelte (4)
  • L116:10: Type 'boolean | null' is not assignable to type 'boolean | undefined'.
  • L144:7: Type 'WorkflowExecution | null' is not assignable to type 'WorkflowExecution'.
  • L154:14: 'workflow' is possibly 'null'.
  • L155:9: 'workflow' is possibly 'null'.

Generated by 🚫 dangerJS against 52173b2

GraceGardner
GraceGardner approved these changes Mar 25, 2026
View reviewed changes
Copy link
Copy Markdown
Contributor

@GraceGardner GraceGardner left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good

@rossnelson rossnelson merged commit 3d92202 into main Mar 25, 2026
17 checks passed
@rossnelson rossnelson deleted the fix/sticky-nav-css-variable branch March 25, 2026 16:02
temporal-cicd bot pushed a commit that referenced this pull request Apr 10, 2026
@laurakwhit
chore: bump version to 2.48.2
02361da 
Auto-generated version bump from 2.48.1 to 2.48.2

Specific version: 2.48.2

Changes included:
- [`92cd681e`](92cd681) Re-wire auth to use a provider pattern. Lots of tests remove cloud references (#3230)
- [`3d92202b`](3d92202) Use --top-nav-height CSS variable for sticky element positioning (#3250)
- [`16295986`](1629598) Bump saved view limits from 20 to 50 (#3254)
- [`a9fa0e91`](a9fa0e9) Display cron string instead of calendar spec when schedule has a cron string in comment field (#3241)
- [`f1811715`](f181171) use full for 100% instead of 100vh (#3256)
- [`0dfadd74`](0dfadd7) Add samples-ruby to workflows table empty state (#3259)
- [`d85d61a3`](d85d61a) Display human-readable schedule spec labels (#3261)
- [`b63049c5`](b63049c) Add invite icon to Holocene design system (#3262)
- [`00c6418c`](00c6418) Bump google.golang.org/grpc from 1.66.1 to 1.79.3 in /server (#3232)
- [`b04a3676`](b04a367) Add back animation (#3251)
- [`7b651524`](7b65152) Bump github.com/go-jose/go-jose/v4 from 4.1.3 to 4.1.4 in /server (#3268)
- [`45f4fdea`](45f4fde) use snippets for nexus CTAs (#3266)
- [`420f5c9d`](420f5c9) min-h-full instead of screen (#3270)
- [`f5b2fab6`](f5b2fab) feat(navigation): add NavSection Holocene component (#3263)
- [`657b2728`](657b272) Adds requested design changes to breadcrumb items (#3267)
- [`6763cc4d`](6763cc4) Remove serena (#3273)
- [`dfff353e`](dfff353) Display Principal fields in Event History (#3272)
- [`2d289bce`](2d289bc) Update CODEOWNERS to wildcard for temporalio/frontend-engineering (#3275)
- [`a2eaf16e`](a2eaf16) Persist workflow view and sort order preferences across navigation (#3260)
- [`c5d4c996`](c5d4c99) Add link from Event Card to jump to event id page from Timeline. Remove unnecessary padding (#3277)
- [`e5b3ea55`](e5b3ea5) fix(deps): upgrade lodash, svelte, kit, storybook, tar-fs for security (#3269)
- [`b44afbe6`](b44afbe) fix(deps): upgrade vite and add picomatch/svgo overrides for security (#3279)
- [`4e8cb4e9`](4e8cb4e) Fix unpause confirmation modal title (#3280)
- [`740b3529`](740b352) Add Slack notification when DESIGN FEEDBACK REQUESTED label is added to a PR (#3282)
- [`7e8170e4`](7e8170e) Add check for COLLABORATOR (#3283)
- [`dc27109d`](dc27109) fix: update nav item margin from mb-1 to mb-2 (#3290)
- [`3e6416d2`](3e6416d) Pass execution runId in workflow request for schedule recent run (#3289)
- [`ae3a1844`](ae3a184) Fix schedule edit double-encoding header fields (#3287)
- [`09c083e0`](09c083e) fix: prevent reset modal from closing on authorization error (#3291)
- [`0aa3b72b`](0aa3b72) Sort namespace picker alphabetically (#3286)
- [`4c3d0057`](4c3d005) Sort alphabetically utility (#3293)
- [`67a988b9`](67a988b) Bump @sveltejs/kit from 2.55.0 to 2.57.1 (#3294)
@temporal-cicd temporal-cicd bot mentioned this pull request Apr 10, 2026
Merged
laurakwhit added a commit that referenced this pull request Apr 10, 2026
@temporal-cicd @laurakwhit
chore: bump version to 2.48.2 (#3295)
dce87ac 
Auto-generated version bump from 2.48.1 to 2.48.2

Specific version: 2.48.2

Changes included:
- [`92cd681e`](92cd681) Re-wire auth to use a provider pattern. Lots of tests remove cloud references (#3230)
- [`3d92202b`](3d92202) Use --top-nav-height CSS variable for sticky element positioning (#3250)
- [`16295986`](1629598) Bump saved view limits from 20 to 50 (#3254)
- [`a9fa0e91`](a9fa0e9) Display cron string instead of calendar spec when schedule has a cron string in comment field (#3241)
- [`f1811715`](f181171) use full for 100% instead of 100vh (#3256)
- [`0dfadd74`](0dfadd7) Add samples-ruby to workflows table empty state (#3259)
- [`d85d61a3`](d85d61a) Display human-readable schedule spec labels (#3261)
- [`b63049c5`](b63049c) Add invite icon to Holocene design system (#3262)
- [`00c6418c`](00c6418) Bump google.golang.org/grpc from 1.66.1 to 1.79.3 in /server (#3232)
- [`b04a3676`](b04a367) Add back animation (#3251)
- [`7b651524`](7b65152) Bump github.com/go-jose/go-jose/v4 from 4.1.3 to 4.1.4 in /server (#3268)
- [`45f4fdea`](45f4fde) use snippets for nexus CTAs (#3266)
- [`420f5c9d`](420f5c9) min-h-full instead of screen (#3270)
- [`f5b2fab6`](f5b2fab) feat(navigation): add NavSection Holocene component (#3263)
- [`657b2728`](657b272) Adds requested design changes to breadcrumb items (#3267)
- [`6763cc4d`](6763cc4) Remove serena (#3273)
- [`dfff353e`](dfff353) Display Principal fields in Event History (#3272)
- [`2d289bce`](2d289bc) Update CODEOWNERS to wildcard for temporalio/frontend-engineering (#3275)
- [`a2eaf16e`](a2eaf16) Persist workflow view and sort order preferences across navigation (#3260)
- [`c5d4c996`](c5d4c99) Add link from Event Card to jump to event id page from Timeline. Remove unnecessary padding (#3277)
- [`e5b3ea55`](e5b3ea5) fix(deps): upgrade lodash, svelte, kit, storybook, tar-fs for security (#3269)
- [`b44afbe6`](b44afbe) fix(deps): upgrade vite and add picomatch/svgo overrides for security (#3279)
- [`4e8cb4e9`](4e8cb4e) Fix unpause confirmation modal title (#3280)
- [`740b3529`](740b352) Add Slack notification when DESIGN FEEDBACK REQUESTED label is added to a PR (#3282)
- [`7e8170e4`](7e8170e) Add check for COLLABORATOR (#3283)
- [`dc27109d`](dc27109) fix: update nav item margin from mb-1 to mb-2 (#3290)
- [`3e6416d2`](3e6416d) Pass execution runId in workflow request for schedule recent run (#3289)
- [`ae3a1844`](ae3a184) Fix schedule edit double-encoding header fields (#3287)
- [`09c083e0`](09c083e) fix: prevent reset modal from closing on authorization error (#3291)
- [`0aa3b72b`](0aa3b72) Sort namespace picker alphabetically (#3286)
- [`4c3d0057`](4c3d005) Sort alphabetically utility (#3293)
- [`67a988b9`](67a988b) Bump @sveltejs/kit from 2.55.0 to 2.57.1 (#3294)

Co-authored-by: laurakwhit <15069288+laurakwhit@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@GraceGardner GraceGardner GraceGardner approved these changes

@rossedfort rossedfort Awaiting requested review from rossedfort

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@rossnelson @GraceGardner