Question: Why doesn't side info panel should scroll like the issue page on pull request page #3233
Zak Siddiqui opened 16 hours ago

Motivation

The side info panel on the pull request page does not scroll in the same way as the equivalent panel on the issue detail page. On an issue, the panel scrolls naturally with the page content and settles (sticks) at the top once it reaches the header offset, so the whole panel is reachable by normal page scrolling. On a pull request, the page stops scrolling before the sidebar content is exhausted and the remainder is either trapped behind an inner scrollbar or not reachable at all.

The issue page is the reference behaviour here — it is what the panel is designed to do, and what users have already learned. A PR sidebar that scrolls differently is a usability and consistency defect:

  • Narrow, tall viewports and zoomed-in/browser-sidebar layouts are where this bites hardest: sidebar sections like metadata, participants, linked items, and checks get cut off.
  • Nested scroll areas are easy to miss with a trackpad or keyboard; users conclude the content is missing rather than scrollable.
  • Inconsistency between two pages that render the same component class makes the UI feel unreliable and generates repeat questions.

Current behaviour (pull request page)

  • Scrolling the main page content stops while sidebar content is still not fully visible.
  • Remaining sidebar content is only reachable via a nested scroll region, which is not obvious and does not respond to normal page scrolling.
  • Sidebar content can be clipped entirely on shorter viewports.

Expected / proposed behaviour (match the issue page)

  • The side info panel scrolls naturally with the page, exactly as it does on the issue detail page.
  • Once the panel reaches the header offset it sticks, and the page continues to scroll underneath it.
  • No nested scrollbar is introduced for the side panel; the page is the only scroll container for it.
  • All sidebar content is reachable by normal page scrolling at any reasonable viewport height, zoom level, and with a visible browser sidebar.
  • Behaviour on the issue page is unchanged — it is the acceptance reference, so any solution must not regress it.

Suggested solution

(Hypothesis — confirm before implementing.) The difference is most likely not the sticky value but the scroll container the panel resolves against: position: sticky is resolved against the nearest scrolling ancestor, not the viewport. On the PR page the side column sits in a full-height layout where an ancestor has non-visible overflow (e.g. overflow-y: auto/hidden with height: 100% / min-height: 0), so the panel sticks relative to that inner box instead of the document.

Two candidate fixes, in order of preference:

  1. Remove the clipping context on the PR page so the panel's nearest scrolling ancestor is the document, as on the issue page. Let the content column grow naturally rather than being height-constrained, and drop the non-visible overflow from the ancestors of the side column. This unifies the two pages with the least special-casing.
  2. Extract the shared layout used by the issue page — or a single side-panel wrapper that owns the sticky/offset behaviour — and use it from both pages, so the two cannot drift again.

If it turns out the panel genuinely needs an inner scroll region on PRs (e.g. a very long checks list), that should be a deliberate, visible affordance and applied to both pages, not an accidental side effect of the layout.

Acceptance criteria

  •  Side panel on the PR page scrolls identically to the issue page, side by side, at the same viewport size.
  •  No nested scrollbar for the side panel on the PR page.
  •  Panel sticks at the same header offset on both pages.
  •  Verified at a short viewport height, at high zoom, and with a browser side panel open.
  •  Issue page behaviour unchanged.
  •  Keyboard-only scrolling reaches all sidebar content.
  •  PR sidebar does not need an intentional inner scroll for pathological content

Notes / out of scope

  • Not a request to redesign the PR sidebar content — only its scrolling and positioning behaviour.
  • Service Desk commented 16 hours ago

    The current implementation has two sidebar modes, so the answer depends on the PR tab and the available browser width:

    • On wide layouts (at least 1199 CSS pixels), issue detail pages and ordinary PR detail tabs use the same SideInfoPanel and shared sticky styling. The sidebar content uses position: sticky; top: 0, without an inner scrollbar imposed by that wide-layout rule.
    • At 1198 CSS pixels or less, both pages switch to a fixed drawer whose body scrolls independently. Browser zoom or opening a browser side panel can reduce the available CSS width enough to trigger this mode.
    • The PR Changes tab explicitly enables that drawer mode at every width through hide-side-info. Its panel is fixed to the viewport and has an internally scrollable body. Consequently, scrolling the main page does not scroll the remaining drawer content; scroll inside the drawer to reach it.

    These rules are in the shared side-info.css/side-info.js, with the Changes-tab override in PullRequestChangesPage. Thus, if the comparison is between an issue and the PR Changes tab on a wide screen, the difference is explicitly configured, rather than explained solely by an accidental sticky ancestor. Making those two views identical would change the current Changes-tab layout. Also, requiring no inner scrollbar at narrow widths would differ from the current issue-page behavior too.

    This is based on inspection of the current source; I have not reproduced the reported clipping in your environment. Completely unreachable content is not explained merely by the existence of the drawer scrollbar.

    Could you share your OneDev version, the affected PR tab (particularly whether it is Activities or Changes), browser, viewport size and zoom, and a screenshot showing the cut-off section? If this happens on Activities at a wide viewport, or content remains unreachable when scrolling inside the drawer, those details will help distinguish it from the configured drawer behavior. Does the explanation above account for the difference you are seeing?

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