Problem
Comments now render in the app's main content area as well as in the right panel. When someone followed a :comments/<comment-id> link, the focused comment could render outside the visible viewport—especially after its parent thread was inserted above it. The URL identified the right comment, but navigation did not reliably bring that comment into view.
This regressed behavior that previously worked inside the right panel's fixed scroll area. The main content area scrolls the whole page, so the old panel-specific scroll-container logic could not be reused directly.
Solution
Use the focused comment itself as the scroll anchor in the shared CommentDiscussions component:
Render the focused comment first.
Preserve the existing staged rendering of its parent thread.
After the parents render above it, immediately align the focused comment with the top of the active scrolling viewport using scrollIntoView({behavior: 'instant', block: 'start'}).
Re-run the adjustment when navigation changes the focused comment ID.
Keep the behavior shared so it works in both the main content area and the right panel.
Do not scroll for comment-list routes or loading, deleted, and not-found states where there is no focused element.
User stories:
As someone opening a comment permalink, I immediately see the comment identified by the URL.
As someone reading a reply, I retain access to its parent context without the focused reply being pushed out of view.
As someone navigating between focused comments, each destination is positioned consistently without smooth scrolling.
The implementation is intentionally minimal: one layout effect uses the existing focused-comment ref, and a regression test verifies that scrolling occurs after parent comments render.
Scope
This was a small frontend behavior restoration completed in one implementation pass:
Trace focused-comment routing and shared rendering across the main view and right panel.
Restore post-parent-render scroll anchoring in `CommentDiscussions`.
Add a Vitest/jsdom regression test for immediate top alignment.
Verify the UI package with typechecking, all 326 tests, formatting, audit, and diff checks.
The remaining product validation is a visual smoke test with both short and deeply nested parent threads in the main content area and right panel. This validation will determine whether whole-page top alignment feels acceptable in the main view.
Rabbit Holes
Rebuilding the former Radix scroll-area lookup, which only fit the old fixed right-panel structure.
Creating separate scroll implementations for the main view and right panel instead of using the shared component.
Building generalized scroll-container discovery or measurement abstractions before the simple element anchor is visually evaluated.
Adding smooth scrolling or animation, which would make permalink navigation slower and less deterministic.
Refactoring the broader comments rendering architecture while restoring this focused behavior.
Tuning offsets for every sticky header or viewport variation before observing a concrete problem.
No Gos
Do not hide parent comments by default or add a “show parent comments” button in this iteration.
Do not remove thread context to avoid handling scroll position.
Do not scroll routes that have no focused comment.
Do not attempt to scroll deleted, missing, or still-loading focused comments.
Do not introduce smooth scrolling.
Do not couple the fix to a specific panel implementation or hard-coded scroll container.
Do not expand this project into a redesign of comment navigation or discussion layout.
Do you like what you are reading? Subscribe to receive updates.
Unsubscribe anytime