ammachado opened a new pull request, #1781: URL: https://github.com/apache/camel-website/pull/1781
Fixes #1772. ## What was wrong The blog rail is a fixed 240px scroll container whose content sits flush against its right edge: the category counts are pinned there by `justify-content: space-between`. Nothing reserved space for the scrollbar, so a browser drawing an **overlay** scrollbar paints it straight over the text, which is what @stefanhuber's screenshot shows (counts clipped, pick titles wrapping a word early). ## Why only Firefox Windows 11 hides scroll bars by default and Firefox honors that setting, switching to overlay scrollbars, which take no layout width. Chromium on Windows always uses classic scrollbars, and those are subtracted from the content box, so they can narrow the rail but never cover it. This is not a Firefox rendering glitch: overlay scrollbars overlapping content is permitted, and the missing gutter is ours. ## Why not `scrollbar-gutter: stable` That looks like the fix and is not. Per CSS Overflow 3 a gutter is only defined for classic scrollbars, so it does nothing against overlay ones. Measured on Firefox 156 with `ui.useOverlayScrollbars=1`, the property computes to `stable` and still reserves 0px, leaving the overlap exactly as it was. ## The fix Reserve the lane with explicit padding, through a new `--scrollbar-overlay-lane` token, paired with a matching negative margin so the lane bleeds into the existing grid gap and the text measure does not change. Clear space to the right of the category count, measured on Firefox 156: | scrollbar mode | before | after | rail text width | | --- | --- | --- | --- | | overlay (Windows 11 default) | 0px | 12px | 240px, unchanged | | classic | 15px | 27px | 225px, unchanged | `.community-nav` and the docs TOC list get the same treatment. Neither could be made to scroll during testing, so those are latent rather than reported, but they are built the same way and would fail the same way. ## Verification `gulp bundle` passes (stylelint, eslint, 33 unit tests), and the regenerated `public/_/` artifacts are included as usual for a CSS change. Please note one limitation: the Gecko measurements above come from Firefox 156 on macOS with `ui.useOverlayScrollbars` forced, not from genuine Windows 11 Firefox ESR. @stefanhuber, if you can check this against the Netlify preview on your `140.16.0esr` Windows setup, that would confirm it on the configuration that actually reported it. 🤖 Generated with [Claude Code](https://claude.com/claude-code) on behalf of Adriano Machado (@ammachado) _This was generated by an AI agent and may contain inaccuracies. Please verify before relying on it._ -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected]
