This is an automated email from the ASF dual-hosted git repository.
davsclaus pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/camel-website.git
The following commit(s) were added to refs/heads/main by this push:
new 5d08759c Blog: keep the overlay scrollbar off the left rail's text
(#1772) (#1781)
5d08759c is described below
commit 5d08759c5e678eee2e7d7f3d2ca7d9324850a041
Author: Adriano Machado <[email protected]>
AuthorDate: Sun Sep 20 04:03:29 2026 -0400
Blog: keep the overlay scrollbar off the left rail's text (#1772) (#1781)
The blog rail is a fixed 240px scroll container whose content sits flush
against its right edge, with the category counts pinned there by
justify-content: space-between. Nothing reserved space for the scrollbar,
so a browser drawing an overlay scrollbar painted it straight over the
text: counts clipped, pick titles wrapping a word early.
That is why only Firefox showed it. Windows 11 hides scroll bars by
default and Firefox honors the 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.
scrollbar-gutter: stable 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.
Reserve the lane with explicit padding instead, through a new
--scrollbar-overlay-lane token, paired with a matching negative margin so
the lane bleeds into the grid gap and the text measure does not change.
Clear space to the right of the category count, Firefox 156:
overlay scrollbars 0px -> 12px (rail text stays 240px)
classic scrollbars 15px -> 27px (rail text stays 225px)
Apply the same shape to .community-nav and the docs TOC list. 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.
_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._
---
antora-ui-camel/public/_/css/site-8b1f35b7a5.css | 23 -----------------------
antora-ui-camel/public/_/css/site-fcc1ff1ab1.css | 23 +++++++++++++++++++++++
antora-ui-camel/public/_/data/rev-manifest.json | 2 +-
antora-ui-camel/public/_/helpers/asset.js | 2 +-
antora-ui-camel/public/_/partials/head-styles.hbs | 2 +-
antora-ui-camel/public/_/rev-manifest | 2 +-
antora-ui-camel/src/css/blog.css | 14 ++++++++++++++
antora-ui-camel/src/css/static.css | 6 +++++-
antora-ui-camel/src/css/toc.css | 4 ++++
antora-ui-camel/src/css/vars.css | 7 +++++++
10 files changed, 57 insertions(+), 28 deletions(-)
diff --git a/antora-ui-camel/public/_/css/site-8b1f35b7a5.css
b/antora-ui-camel/public/_/css/site-8b1f35b7a5.css
deleted file mode 100644
index 8ee82ec9..00000000
--- a/antora-ui-camel/public/_/css/site-8b1f35b7a5.css
+++ /dev/null
@@ -1,23 +0,0 @@
-@layer fonts, base, chrome, content, primitives, pages, print;@layer
fonts{@font-face{font-family:Open
Sans;font-style:normal;font-display:swap;font-weight:300;src:local("Open Sans
Light"),local("OpenSans-Light"),url(../font/open-sans-latin-ext-300.woff2)
format("woff2"),url(../font/open-sans-latin-ext-300.woff)
format("woff")}@font-face{font-family:Open
Sans;font-style:italic;font-display:swap;font-weight:300;src:local("Open Sans
Light Italic"),local("OpenSans-LightItalic"),url(../font/ [...]
-/*! highlight.js theme for the 2026 redesign, per SCOPE.md section 2a.
- Replaces the GitHub light theme; --pre-background is now --color-ink.
- Colors live in vars.css as --syntax-*, shared with chroma.css.
*/.hljs-comment,.hljs-quote{color:#8f867a;font-style:italic}.hljs-keyword,.hljs-selector-tag,.hljs-subst{color:#e97826;font-weight:600}.hljs-attr,.hljs-literal,.hljs-number,.hljs-tag
.hljs-attr,.hljs-template-variable,.hljs-variable{color:#e8c87a}.hljs-doctag,.hljs-string{color:#f2a05a}.hljs-section,.hljs-selector-id,.hljs-title{color:#faf7f1;font-weight:600}.hljs-subst{font-weight:400}.hljs-class
.hljs-title,.hljs-type{c [...]
-
-/*! Chroma theme for the 2026 redesign, per SCOPE.md section 2a.
- Hugo highlights markdown code fences with chroma (noClasses = false in
- config.toml), emitting <div class="highlight"><pre class="chroma">. Antora
- uses highlight.js instead, themed in highlight.css. Both bind the same
- --syntax-* tokens from vars.css so the two systems stay in step.
-
- pre.chroma already picks up --pre-background and --pre-font-color from
- doc.css, because blog content carries class="blog doc". Only token colors
- are set here.
-
- Chroma classes are mapped to the highlight.js class with the same meaning.
- Classes left deliberately unstyled, inheriting the base code color, mirror
- constructs highlight.js also leaves unstyled: .n and .nx (plain
- identifiers), .o and .ow (operators), .p (punctuation), .w (whitespace),
- .line and .cl (line wrappers), and .err (a lexer hiccup is not worth a
- color). .go, generic command output, is content the reader needs rather
- than chrome, so it stays at the base color too. */}@layer content{@media
screen and (width >= 1025px){.doc{font-size:.88889rem;margin:0
2rem;max-width:none;min-width:0}}.doc h1,.doc h2,.doc h3,.doc h4,.doc h5,.doc
h6{color:#211c17;font-weight:700;-webkit-hyphens:none;-ms-hyphens:none;hyphens:none;line-height:1.3;margin:1rem
0
0}.doc>h1.page,.static>h1:first-child{font-size:2.33333rem;font-weight:800;letter-spacing:-.03em;line-height:1.05;margin:.55556rem
0 0}.doc>h1.page img{width:2r [...]
-/*! Asciidoctor Tabs | Copyright (c) 2018-present Dan Allen | MIT License
*/.tablist>ul li:focus-visible{outline:none}.tablist.ulist,.tablist.ulist>ul
li{margin:0}.tablist.ulist>ul li+li{margin-left:.25em}.tabs.is-loading .tablist
li:not(:first-child),.tabs:not(.is-loading) .tablist
li:not(.is-selected){background-color:#f5f5f5}.tabs.is-loading .tablist
li:first-child::after,.tabs:not(.is-loading) .tablist
li.is-selected::after{background-color:inherit;content:"";display:block;height:3px
[...]
\ No newline at end of file
diff --git a/antora-ui-camel/public/_/css/site-fcc1ff1ab1.css
b/antora-ui-camel/public/_/css/site-fcc1ff1ab1.css
new file mode 100644
index 00000000..e239e33e
--- /dev/null
+++ b/antora-ui-camel/public/_/css/site-fcc1ff1ab1.css
@@ -0,0 +1,23 @@
+@layer fonts, base, chrome, content, primitives, pages, print;@layer
fonts{@font-face{font-family:Open
Sans;font-style:normal;font-display:swap;font-weight:300;src:local("Open Sans
Light"),local("OpenSans-Light"),url(../font/open-sans-latin-ext-300.woff2)
format("woff2"),url(../font/open-sans-latin-ext-300.woff)
format("woff")}@font-face{font-family:Open
Sans;font-style:italic;font-display:swap;font-weight:300;src:local("Open Sans
Light Italic"),local("OpenSans-LightItalic"),url(../font/ [...]
+/*! highlight.js theme for the 2026 redesign, per SCOPE.md section 2a.
+ Replaces the GitHub light theme; --pre-background is now --color-ink.
+ Colors live in vars.css as --syntax-*, shared with chroma.css.
*/.hljs-comment,.hljs-quote{color:#8f867a;font-style:italic}.hljs-keyword,.hljs-selector-tag,.hljs-subst{color:#e97826;font-weight:600}.hljs-attr,.hljs-literal,.hljs-number,.hljs-tag
.hljs-attr,.hljs-template-variable,.hljs-variable{color:#e8c87a}.hljs-doctag,.hljs-string{color:#f2a05a}.hljs-section,.hljs-selector-id,.hljs-title{color:#faf7f1;font-weight:600}.hljs-subst{font-weight:400}.hljs-class
.hljs-title,.hljs-type{c [...]
+
+/*! Chroma theme for the 2026 redesign, per SCOPE.md section 2a.
+ Hugo highlights markdown code fences with chroma (noClasses = false in
+ config.toml), emitting <div class="highlight"><pre class="chroma">. Antora
+ uses highlight.js instead, themed in highlight.css. Both bind the same
+ --syntax-* tokens from vars.css so the two systems stay in step.
+
+ pre.chroma already picks up --pre-background and --pre-font-color from
+ doc.css, because blog content carries class="blog doc". Only token colors
+ are set here.
+
+ Chroma classes are mapped to the highlight.js class with the same meaning.
+ Classes left deliberately unstyled, inheriting the base code color, mirror
+ constructs highlight.js also leaves unstyled: .n and .nx (plain
+ identifiers), .o and .ow (operators), .p (punctuation), .w (whitespace),
+ .line and .cl (line wrappers), and .err (a lexer hiccup is not worth a
+ color). .go, generic command output, is content the reader needs rather
+ than chrome, so it stays at the base color too. */}@layer content{@media
screen and (width >= 1025px){.doc{font-size:.88889rem;margin:0
2rem;max-width:none;min-width:0}}.doc h1,.doc h2,.doc h3,.doc h4,.doc h5,.doc
h6{color:#211c17;font-weight:700;-webkit-hyphens:none;-ms-hyphens:none;hyphens:none;line-height:1.3;margin:1rem
0
0}.doc>h1.page,.static>h1:first-child{font-size:2.33333rem;font-weight:800;letter-spacing:-.03em;line-height:1.05;margin:.55556rem
0 0}.doc>h1.page img{width:2r [...]
+/*! Asciidoctor Tabs | Copyright (c) 2018-present Dan Allen | MIT License
*/.tablist>ul li:focus-visible{outline:none}.tablist.ulist,.tablist.ulist>ul
li{margin:0}.tablist.ulist>ul li+li{margin-left:.25em}.tabs.is-loading .tablist
li:not(:first-child),.tabs:not(.is-loading) .tablist
li:not(.is-selected){background-color:#f5f5f5}.tabs.is-loading .tablist
li:first-child::after,.tabs:not(.is-loading) .tablist
li.is-selected::after{background-color:inherit;content:"";display:block;height:3px
[...]
\ No newline at end of file
diff --git a/antora-ui-camel/public/_/data/rev-manifest.json
b/antora-ui-camel/public/_/data/rev-manifest.json
index 2098854a..300f1b54 100644
--- a/antora-ui-camel/public/_/data/rev-manifest.json
+++ b/antora-ui-camel/public/_/data/rev-manifest.json
@@ -1,5 +1,5 @@
{
- "css/site.css": "css/site-8b1f35b7a5.css",
+ "css/site.css": "css/site-fcc1ff1ab1.css",
"css/vendor/docsearch.css": "css/vendor/docsearch-5db8a73adb.css",
"img/algolia.svg": "img/algolia-f4ab98e0de.svg",
"img/apache-kafka.svg": "img/apache-kafka-88809b7472.svg",
diff --git a/antora-ui-camel/public/_/helpers/asset.js
b/antora-ui-camel/public/_/helpers/asset.js
index 54c1dfa4..8d892cb3 100644
--- a/antora-ui-camel/public/_/helpers/asset.js
+++ b/antora-ui-camel/public/_/helpers/asset.js
@@ -1,7 +1,7 @@
'use strict'
const manifest = {
- "css/site.css": "css/site-8b1f35b7a5.css",
+ "css/site.css": "css/site-fcc1ff1ab1.css",
"css/vendor/docsearch.css": "css/vendor/docsearch-5db8a73adb.css",
"img/algolia.svg": "img/algolia-f4ab98e0de.svg",
"img/apache-kafka.svg": "img/apache-kafka-88809b7472.svg",
diff --git a/antora-ui-camel/public/_/partials/head-styles.hbs
b/antora-ui-camel/public/_/partials/head-styles.hbs
index c131f696..5350adc7 100644
--- a/antora-ui-camel/public/_/partials/head-styles.hbs
+++ b/antora-ui-camel/public/_/partials/head-styles.hbs
@@ -1,5 +1,5 @@
<link rel="stylesheet"
href="{{uiRootPath}}/css/vendor/docsearch-5db8a73adb.css">
- <link rel="stylesheet" href="{{uiRootPath}}/css/site-8b1f35b7a5.css">
+ <link rel="stylesheet" href="{{uiRootPath}}/css/site-fcc1ff1ab1.css">
{{!-- NOTE the asciinema partials are injected into the UI catalog by
@springio/antora-extensions at Antora build time, so they only exist
during a site build.
Guarding on the page attribute the extension sets keeps the assets off
pages with no cast,
diff --git a/antora-ui-camel/public/_/rev-manifest
b/antora-ui-camel/public/_/rev-manifest
index 2098854a..300f1b54 100644
--- a/antora-ui-camel/public/_/rev-manifest
+++ b/antora-ui-camel/public/_/rev-manifest
@@ -1,5 +1,5 @@
{
- "css/site.css": "css/site-8b1f35b7a5.css",
+ "css/site.css": "css/site-fcc1ff1ab1.css",
"css/vendor/docsearch.css": "css/vendor/docsearch-5db8a73adb.css",
"img/algolia.svg": "img/algolia-f4ab98e0de.svg",
"img/apache-kafka.svg": "img/apache-kafka-88809b7472.svg",
diff --git a/antora-ui-camel/src/css/blog.css b/antora-ui-camel/src/css/blog.css
index 1b91af17..4b77c6bd 100644
--- a/antora-ui-camel/src/css/blog.css
+++ b/antora-ui-camel/src/css/blog.css
@@ -25,6 +25,14 @@
.blog-rail {
max-height: calc(100vh - var(--navbar-height) - calc(48 / var(--rem-base) *
1rem));
overflow-y: auto;
+
+ /* Keep the scrollbar off the rail's text. The category counts sit flush
+ right (justify-content: space-between), so an overlay scrollbar - what
+ Firefox uses on Windows 11, where hiding scrollbars is the default -
+ paints straight over them. The negative margin lets the box bleed the
+ lane back into the 56px grid gap, so the text measure stays 240px. */
+ padding-right: var(--scrollbar-overlay-lane);
+ margin-right: calc(-1 * var(--scrollbar-overlay-lane));
}
/* "Start here" picks (data/blog-picks.yaml): same list shape as the
@@ -283,6 +291,12 @@
position: static;
max-height: none;
overflow-y: visible;
+
+ /* Single column here, so there is no gap to bleed the lane into and
+ nothing scrolls in place: drop it rather than pull the rail 12px
+ past the layout padding. */
+ padding-right: 0;
+ margin-right: 0;
}
}
diff --git a/antora-ui-camel/src/css/static.css
b/antora-ui-camel/src/css/static.css
index b6b71e68..e9de6d3f 100644
--- a/antora-ui-camel/src/css/static.css
+++ b/antora-ui-camel/src/css/static.css
@@ -122,12 +122,16 @@
}
}
+/* padding-right + the matching negative margin keep an overlay scrollbar
+ off the link text without narrowing the column; the lane bleeds into the
+ 32px grid gap. Same shape as .blog-rail - see issue #1772. */
.community-nav {
position: sticky;
top: var(--navbar-height);
height: calc(100vh - var(--navbar-height) - 2rem);
overflow-y: auto;
- padding: calc(14 / var(--rem-base) * 1rem) 0;
+ padding: calc(14 / var(--rem-base) * 1rem) var(--scrollbar-overlay-lane)
calc(14 / var(--rem-base) * 1rem) 0;
+ margin-right: calc(-1 * var(--scrollbar-overlay-lane));
}
.community-nav-title {
diff --git a/antora-ui-camel/src/css/toc.css b/antora-ui-camel/src/css/toc.css
index 3b6e7b06..e512dc5b 100644
--- a/antora-ui-camel/src/css/toc.css
+++ b/antora-ui-camel/src/css/toc.css
@@ -33,9 +33,13 @@
padding: 0;
}
+/* No negative margin to match: this is the last column, so the lane has no
+ gap to bleed into and long entries simply wrap 12px earlier. Keeps an
+ overlay scrollbar off the text - see issue #1772. */
.toc.sidebar .toc-menu ul {
max-height: var(--toc-height);
overflow-y: auto;
+ padding-right: var(--scrollbar-overlay-lane);
}
.toc .toc-menu li {
diff --git a/antora-ui-camel/src/css/vars.css b/antora-ui-camel/src/css/vars.css
index f162a5eb..791be54f 100644
--- a/antora-ui-camel/src/css/vars.css
+++ b/antora-ui-camel/src/css/vars.css
@@ -75,6 +75,13 @@
--scrollbar-thumb-active-color: var(--color-gray-50);
--scrollbar-thickness: 0.425em; /* 6.8px */
--scrollbar-radius: 3.125em; /* 50px */
+ /* Lane kept clear on the right of a scroll container so an overlay
+ scrollbar never paints over its content. Overlay scrollbars take no
+ layout width, so scrollbar-gutter is a no-op against them (it only
+ reserves space for classic scrollbars) and explicit padding is the
+ only thing that works. Sized for Firefox's expanded overlay
+ scrollbar, the widest of them. See issue #1772. */
+ --scrollbar-overlay-lane: calc(12 / var(--rem-base) * 1rem);
/* navbar */
/* The bar is dark on every page, Hugo and Antora alike. 96% rather than a
lighter tint: over the cream pages 88% came out a muddy taupe instead of
