fix: prevent layout shift in sticky navbar

[deepanshurajput0]

What does this PR do?

This PR fixes a layout shift issue in the sticky navigation/header by reserving a stable height for sticky elements.
Previously, the header caused a visible layout jump during render/scroll due to dynamic height changes. The fix ensures consistent layout behavior without switching to position: fixed.

Video Demo (if applicable):

Before

Recording.2026-01-26.135917.1.mp4

After

Recording.2026-01-27.002121.mp4

Image Demo (if applicable):

Before

After

Mandatory Tasks (DO NOT REMOVE)

• I have self-reviewed the code (A decent size PR without self-review might be rejected).
• I confirm automated tests are in place that prove my fix is effective or that my feature works.

How should this be tested?

Run the app locally.
Open the application on a desktop and mobile viewport (or use device emulation).
Navigate to pages using the app layout.
Scroll the page and observe the sticky navigation/header.

Expected result:
No visible layout shift when the header becomes sticky.
Header height remains consistent during render and scroll.

---

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.

---

Deepanshu Verma seems not to be a GitHub user. You need a GitHub account to be able to sign the CLA. If you have already a GitHub account, please add the email address used for this commit to your account.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

[cubic-dev-ai]

No issues found across 3 files

[dhairyashiil]

ipad view needs some adjustment, please check

Screen.Recording.2026-01-27.at.2.09.10.AM.mov

[cubic-dev-ai]

No issues found across 3 files

[deepanshurajput0]

ipad view needs some adjustment, please check

Screen.Recording.2026-01-27.at.2.09.10.AM.mov

Thanks for pointing this out — I’ll adjust the layout for iPad breakpoints and update the PR.

[deepanshurajput0]

@dhairyashiil
I’ve adjusted the layout for iPad breakpoints and added a short screen recording above showing the fix. Please take another look when you have time.

Recording.2026-01-27.123510.mp4

[cubic-dev-ai]

1 issue found across 5 files

Prompt for AI agents (all issues)

Check if these issues are valid — if so, understand the root cause of each and fix them.


<file name="apps/web/modules/shell/Shell.tsx">

<violation number="1" location="apps/web/modules/shell/Shell.tsx:136">
P2: `disableSticky` no longer disables fixed positioning on md+; header remains fixed and can overlap content</violation>
</file>

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}

[cubic-dev-ai]

1 issue found across 5 files

Prompt for AI agents (all issues)

Check if these issues are valid — if so, understand the root cause of each and fix them.


<file name="apps/web/modules/shell/Shell.tsx">

<violation number="1" location="apps/web/modules/shell/Shell.tsx:138">
P2: Adding `md:fixed` removes the header from document flow at md+, but there’s no spacer/padding to preserve its height, so content below can overlap the header on larger screens.</violation>
</file>

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}

[sahitya-chandra]

@deepanshurajput0, what's the status!!

[sahitya-chandra]

@cubic-dev-ai Can you review this now?

[cubic-dev-ai]

@cubic-dev-ai Can you review this now?

@sahitya-chandra I have started the AI code review. It will take a few minutes to complete.

[devin-ai-integration]

Devin Review found 2 potential issues.

View 4 additional findings in Devin Review.

[cubic-dev-ai]

1 issue found across 1 file (changes from recent commits).

Prompt for AI agents (all issues)

Check if these issues are valid — if so, understand the root cause of each and fix them.


<file name="apps/web/modules/shell/Shell.tsx">

<violation number="1" location="apps/web/modules/shell/Shell.tsx:193">
P2: Hard-coded md:h-14 spacer can be smaller than the actual sticky header height (e.g., props.large adds py-8, subtitle/CTA/actions), causing overlap/shift on md+ layouts with taller headers.</violation>
</file>

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}

[cubic-dev-ai]

1 issue found across 1 file (changes from recent commits).

Prompt for AI agents (all issues)

Check if these issues are valid — if so, understand the root cause of each and fix them.


<file name="apps/web/modules/shell/Shell.tsx">

<violation number="1" location="apps/web/modules/shell/Shell.tsx:136">
P2: Width/left offsets are applied even when disableSticky is true, so non-sticky pages still get md:w-[calc(...)] and a narrower header than before (previously md:w-[100%]). This can leave a persistent gap and misalign the header/CTA on pages that opt out of sticky behavior (e.g., WorkflowsPage). Consider applying the width/offset classes only when sticky is enabled or restoring full width for disableSticky.</violation>
</file>

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}

[deepanshurajput0]

@sahitya-chandra The main sticky header issue is fixed, and UI looks good. I see some remaining cubic issues flagged by the bot—happy to address them tonight if needed

[cubic-dev-ai]

1 issue found across 1 file (changes from recent commits).

Prompt for AI agents (all issues)

Check if these issues are valid — if so, understand the root cause of each and fix them.


<file name="apps/web/modules/shell/Shell.tsx">

<violation number="1" location="apps/web/modules/shell/Shell.tsx:200">
P2: Spacer height is fixed at 56px, but the sticky header can be taller (e.g., `props.large` adds `py-8`, subtitle/CTA/actions add extra height). On md+ viewports this can let the fixed header overlap content below when heading is large or has extra elements.</violation>
</file>

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}

[cubic-dev-ai]

P2: Spacer height is fixed at 56px, but the sticky header can be taller (e.g., props.large adds py-8, subtitle/CTA/actions add extra height). On md+ viewports this can let the fixed header overlap content below when heading is large or has extra elements.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At apps/web/modules/shell/Shell.tsx, line 200:

<comment>Spacer height is fixed at 56px, but the sticky header can be taller (e.g., `props.large` adds `py-8`, subtitle/CTA/actions add extra height). On md+ viewports this can let the fixed header overlap content below when heading is large or has extra elements.</comment>

<file context>
@@ -198,8 +196,9 @@ export function ShellMain(props: LayoutProps) {
-
-       {!props.disableSticky && <div className="hidden md:block md:h-20" aria-hidden="true" />}
+      {(props.heading || !!props.backPath) && !props.disableSticky && (
+        <div className="hidden md:block md:h-14" aria-hidden="true" />
+      )}
       {props.afterHeading && <>{props.afterHeading}</>}
</file context>

[PeerRich]

why did this view get a sticky header in the first place? not needed. can you change the PR to remove the sticky header in the App Store?

[dhairyashiil]

why did this view get a sticky header in the first place? not needed. can you change the PR to remove the sticky header in the App Store?

removed sticky header from the App Store page:

Screen.Recording.2026-02-06.at.6.34.28.PM.mov

[dhairyashiil]

fixed alignment (right side items in header)

before:

after:

addressed