Make SideInfoPanel sticky on wide viewports #2909
Service Desk opened 2 weeks ago

Summary

On wide viewports, keep the SideInfoPanel (more-info / side-info) useful while the main detail content scrolls: use CSS position: sticky so the pane stays in normal flow at the top, then sticks under the top chrome as the user scrolls. Do not add an inner scrollbar on the side pane.

Design agreed in #2908.

Scope

All detail pages that use SideInfoPanel:

  • Issues
  • Pull requests
  • Builds
  • Packs

Keep today’s fixed overlay behavior below the 1199px breakpoint and on pages with .hide-side-info.

Behavior (wide viewports, ≥1199px)

  1. Sticky sidebarposition: sticky with align-self: flex-start, natural full height (no max-height / overflow: auto on the pane).
  2. Top offset — stick below applicable top UI chrome (not flush at top: 0).
  3. Shared page scroll (no inner scroll) — one scroller (existing .autofit container). Side content shorter than the viewport stays visible while stuck; taller side content can scroll away after the sticky range within the same shared scroll stream.
  4. Not in scope — sidebar-first linked scroll (JS sync that prioritizes sidebar motion before main content). That was considered in #2908 and deferred in favor of simpler sticky + shared scroll.

Implementation notes

  • Sticky is blocked by overflow: hidden on ancestors; issue detail currently has that on .card / .card-body — adjust as needed so sticky can work.
  • Reuse / extend SideInfoPanel + side-info.css rather than page-specific one-offs where possible.
  • Verify across issue / PR / build / pack detail pages, short and tall side content, and narrow viewport overlay regression.

Acceptance

  • On wide viewports, side info sticks under top chrome while main content scrolls.
  • No nested scrollbar inside the side pane.
  • Narrow / .hide-side-info overlay behavior unchanged.
  • Works on issue, PR, build, and pack detail pages that use SideInfoPanel.

Related: #2908

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