fix(layout): wrap static-page sections in a full-width scroll container #47

Merged

nrupard merged 1 commit from fix/scroll-wrapper-not-section into main

2026-05-06 17:38:06 +02:00

nrupard commented

2026-05-06 17:37:59 +02:00

Owner

The previous fix put flex-1 overflow-y-auto on the same <section> that already had max-w-2xl/max-w-4xl. The scrollbar then rendered at the section's right edge, leaving a wide empty band between the scrollbar and the actual right edge of <main> - on widescreen the page felt cropped well short of the viewport.
Move the scroll container out one level: <div class="flex-1 overflow-y-auto"> becomes the flex item that fills <main>, and the original <section> keeps its max-w-* cap as a normal block child. The scrollbar now sits at the right edge of <main> (i.e. against the viewport edge), and the content remains capped to the section's max-width.
Same wrapper applied to enclave landing/settings, discover, home, invitations, and settings pages.

Co-Authored-By: Claude Opus 4.7 (1M context) noreply@anthropic.com

- The previous fix put `flex-1 overflow-y-auto` on the same `<section>` that already had `max-w-2xl`/`max-w-4xl`. The scrollbar then rendered at the section's right edge, leaving a wide empty band between the scrollbar and the actual right edge of `<main>` - on widescreen the page felt cropped well short of the viewport. - Move the scroll container out one level: `<div class="flex-1 overflow-y-auto">` becomes the flex item that fills `<main>`, and the original `<section>` keeps its `max-w-*` cap as a normal block child. The scrollbar now sits at the right edge of `<main>` (i.e. against the viewport edge), and the content remains capped to the section's max-width. - Same wrapper applied to enclave landing/settings, discover, home, invitations, and settings pages. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

nrupard added 1 commit

2026-05-06 17:37:59 +02:00

fix(layout): wrap static-page sections in a full-width scroll container 174e8ba7bf

- The previous fix put `flex-1 overflow-y-auto` on the same `<section>` that already had `max-w-2xl`/`max-w-4xl`. The scrollbar then rendered at the section's right edge, leaving a wide empty band between the scrollbar and the actual right edge of `<main>` - on widescreen the page felt cropped well short of the viewport.
- Move the scroll container out one level: `<div class="flex-1 overflow-y-auto">` becomes the flex item that fills `<main>`, and the original `<section>` keeps its `max-w-*` cap as a normal block child. The scrollbar now sits at the right edge of `<main>` (i.e. against the viewport edge), and the content remains capped to the section's max-width.
- Same wrapper applied to enclave landing/settings, discover, home, invitations, and settings pages.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>