@zaakiy @robin Looking at the current UI code before we turn this into an implementation:

• .nav-tabs-line today only sets align-items: center — no sticky positioning, no opaque background, no z-index.
• The existing “wide mode sticky” pattern is already used by the side info panel: at @media(min-width: 1199px), div.side-info uses position: sticky; top: 0 (relative to .autofit, which already sits below the fixed topbar).
• Bootstrap .sticky-top is position: sticky; top: 0; z-index: 1020.

Title says “white mode”; description says “wide mode” — treating this as wide mode unless you say otherwise.

Please answer the clarifying questions below:

1. Viewport scope for sticky tabs?

   • A) Wide only (min-width: 1199px), matching side-info sticky
   • B) Wide + medium (e.g. sticky from Bootstrap lg / 992px up)
   • C) All viewports, including narrow/mobile

   Pros of A: Matches existing wide sticky chrome; avoids eating scarce vertical space when tabs wrap on small screens. Cons of A: Narrow screens still lose tab access after scrolling. Pros of C: Best accessibility/navigation everywhere. Cons of C: Multi-line wrapped tabs can consume a lot of sticky height on phones. Recommendation: A for the first change; revisit C later if narrow-screen navigation still hurts.

2. Which .nav-tabs-line instances should stick?

   • A) All of them globally (issue/PR/build/user/admin detail tabs, dialogs, etc.)
   • B) Only primary detail-page tab bars (issue, PR, build, iteration, agent, …)
   • C) Only issue and pull request detail pages first

   Pros of A: One CSS rule; consistent behavior. Cons of A: Some tab bars (modals, compact panels) may not want sticky. Pros of B: Covers the long-scroll pages where sticky helps most. Cons of B: Slightly more selective styling / class targeting. Recommendation: B.

3. Sticky top offset when stuck?

   • A) top: 0 within .autofit (same as sticky side-info — sits just under the fixed topbar)
   • B) Offset further down to clear other sticky/header chrome if any
   • C) Use Bootstrap .sticky-top as-is (top: 0; z-index: 1020) with no OneDev-specific offset

   Pros of A: Consistent with side-info; topbar already accounted for by layout. Cons of A: If other in-page sticky headers appear above tabs, they could overlap. Pros of C: Minimal custom CSS. Cons of C: z-index 1020 may fight other overlays; still need theme background. Recommendation: A, with an explicit theme background (see Q4) and a z-index above page content but below modals/dropdowns/side-info overlay.

4. Background when stuck (light / dark)?

   • A) Match the card surface (white / var(--dark-mode-dark))
   • B) Match the page/body background
   • C) Semi-opaque / blurred backdrop

   Pros of A: Tabs live inside cards on detail pages; opaque card color fully hides scrolling content. Cons of A: If a tab bar sits outside a card, color may look slightly off. Pros of C: More “floating” look. Cons of C: Harder contrast/a11y; more CSS complexity. Recommendation: A.

5. If sticky is wide-only, what should happen when tabs wrap to multiple lines?

   • A) Still stick (accept taller sticky bar)
   • B) Disable sticky when the bar wraps / exceeds a max height
   • C) Force nowrap + horizontal scroll instead of wrapping when sticky is enabled

   Pros of A: Simple; tabs remain reachable. Cons of A: Can cover a large portion of the viewport. Pros of C: Keeps sticky height predictable. Cons of C: Horizontal scroll is another a11y/UX tradeoff. Recommendation: A for wide mode (wrapping is uncommon there); do not special-case wrap until we see a real problem.

Once you answer 1–5, I can turn this into a concrete implementation plan (or a follow-up Improvement issue) without guessing.

1. B) Wide + medium (e.g. sticky from Bootstrap lg / 992px up)
2. B) Only primary detail-page tab bars (issue, PR, build, iteration, agent, …)
3. A) top: 0 within .autofit (same as sticky side-info — sits just under the fixed topbar)
4. C) Semi-opaque / blurred backdrop; To achieve that floating look, As this better represents the purpose.
5. C) Force nowrap + horizontal scroll instead of wrapping when sticky is enabled

@zaakiy Thanks — design locked from your answers:

1. Sticky from Bootstrap lg / 992px up (wide + medium)
2. Primary detail-page tab bars only (issue, PR, build, iteration, agent, workspace, user/group, …) — not modals, search panels, or nested report tabs
3. top: 0 within .autofit (same sticky model as side-info)
4. Semi-opaque / blurred backdrop for the floating look
5. When sticky is enabled: nowrap + horizontal scroll (no multi-line wrap)

Implementation sketch for a follow-up Improvement (no code in this Question):

• Add a shared marker class on primary detail tab bars (e.g. nav-tabs-sticky), rather than making every .nav-tabs-line sticky globally.
• Under @media (min-width: 992px):
  • position: sticky; top: 0;
  • z-index above scrolling page content, below modals/dropdowns/side-info overlay (z-index: 1050 on narrow side-info)
  • translucent light/dark background plus backdrop-filter: blur(...)
  • flex-wrap: nowrap; overflow-x: auto; (keep .options from shrinking oddly)
• Below 992px: keep current non-sticky wrapping behavior.

@robin please confirm this plan looks right to implement; once you and @zaakiy are fine with it, we can close this Question and track the work as an Improvement.

@robin Please note that I have not looked into the impact of .autofit

@servicedesk Since we have resolved that we can use the horizontal scroll for overflow, I think it's safe to change my answer for Q1 to C) All viewports, including narrow/mobile

@zaakiy Updated Q1 to C) All viewports — that pairs well with Q5 (nowrap + horizontal scroll), so sticky height stays one line even on phones.

Updated design lock:

1. Sticky on all viewports (no min-width gate)
2. Primary detail-page tab bars only (issue, PR, build, iteration, agent, workspace, user/group, …) — not modals, search panels, or nested report tabs
3. top: 0 within .autofit (same sticky model as side-info on wide)
4. Semi-opaque / blurred backdrop for the floating look
5. When sticky: nowrap + horizontal scroll (no multi-line wrap)

On .autofit (your earlier note): detail pages scroll inside .autofit (JS sets overflow: auto on the innermost autofit). position: sticky; top: 0 is relative to that scroller, which already sits below the fixed topbar — same model side-info uses on wide screens. Side-info itself is non-sticky on narrow because it becomes a fixed overlay there; tab bars do not, so all-viewport sticky for tabs does not conflict with that overlay. No extra mobile top offset should be needed.

Implementation sketch: same as before, except drop the @media (min-width: 992px) gate — apply sticky / nowrap / blur styles unconditionally on a marker class (e.g. nav-tabs-sticky).

@zaakiy Does this updated plan look good so we can close this Question and track the work as an Improvement?

@servicedesk LGTM

@zaakiy Thanks — closing this Question with the locked design:

1. Sticky on all viewports
2. Primary detail-page tab bars only
3. top: 0 within .autofit
4. Semi-opaque / blurred backdrop
5. Nowrap + horizontal scroll when sticky

Tracked for implementation as issue #2954.