Make primary detail-page nav tabs sticky with blur backdrop #2954
Service Desk opened 11 hours ago

Follow-up from issue #2953 (design locked).

Make primary detail-page .nav-tabs-line bars sticky so tabs stay reachable while scrolling long detail pages.

Locked design

  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 (floating look; theme-aware light/dark)
  5. When sticky: flex-wrap: nowrap + horizontal scroll (no multi-line wrap)

Implementation sketch

  • Add a shared marker class on primary detail tab bars (e.g. nav-tabs-sticky), rather than making every .nav-tabs-line sticky globally.
  • Apply unconditionally on that marker class:
    • 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 sticky enablement is always on; keep current non-sticky wrapping only where the marker class is absent.

Context on .autofit

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. No extra mobile top offset should be needed.

1/1
Type
Improvement
Priority
Normal
Assignee
Labels
No labels
Issue Votes (0)
Watchers (3)
Reference
OD-2954
Please wait...
Connection lost or session expired, reload to recover
Page is in error, reload to recover