Skip to content

Responsive grid layout: fixed TopBar/Sidebar with document scroll#3178

Open
benjaminleonard wants to merge 1 commit intomainfrom
bl/responsiveness-grid-layout
Open

Responsive grid layout: fixed TopBar/Sidebar with document scroll#3178
benjaminleonard wants to merge 1 commit intomainfrom
bl/responsiveness-grid-layout

Conversation

@benjaminleonard
Copy link
Copy Markdown
Contributor

@benjaminleonard benjaminleonard commented Apr 13, 2026

Refactor of #2087

Switch from a CSS grid layout (where TopBar and Sidebar occupied grid cells alongside ContentPane) to fixed-position TopBar and Sidebar with document-level scrolling. This is the foundation for mobile/tablet support and likely the place that has the potential to cause the most issues so I'm separating the two.

  • Viewport meta tag: proper responsive width=device-width instead of fixed width=1050
  • CSS: add --sidebar-width variable, responsive --content-gutter (smaller below 1000px), remove overflow-y-hidden on body, set height: 100% on html/body/#root
  • TopBar: single fixed element (was two Fragment children occupying grid cells)
  • Sidebar: fixed position with overflow scroll
  • ContentPane: margin-left offset for sidebar, document-level scroll via min-h-[calc(100vh-...)]
  • Scroll restoration: window.scrollY instead of container .scrollTop
  • PageSkeleton: matches new fixed layout structure
  • E2e: scroll-restore test updated for document scroll, expectScrollTop/scrollTo utils use window

@vercel
Copy link
Copy Markdown

vercel bot commented Apr 13, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
console Ready Ready Preview Apr 14, 2026 0:52am

Request Review

Switch from a CSS grid layout (where TopBar and Sidebar occupied grid
cells alongside ContentPane) to fixed-position TopBar and Sidebar with
document-level scroll. This is the foundation for mobile/tablet support.

Key changes:
- viewport meta tag: proper responsive instead of fixed 1050px
- CSS: add --sidebar-width var, responsive --content-gutter, remove
  body overflow-y-hidden, set html/body/#root height: 100%
- TopBar: single fixed element (was two grid cell fragments)
- Sidebar: fixed position, hidden below 1000px
- ContentPane: margin-left for sidebar on desktop, document scroll
- Scroll restoration: window.scrollY instead of container scrollTop
- PageSkeleton: match new fixed layout structure

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant