fix(toc): add trailing bottom spacing when the TOC scrolls

The desktop TOC is its own scroll container (overflow-y:auto + max-height),
but unlike article content — which gets trailing space via
.page-content > article::after — it had nothing below the last link. A long
TOC scrolled to the bottom left the final link flush against the edge.

Add .toc::after as a block pseudo-element inside the desktop media query,
using the same technique (and the same Firefox-clips-padding-bottom reason)
as the article. Shared component, so public (about/charte/licence) and admin
(#admin-toc) both get it. Verified with Playwright: 0px -> ~60px gap;
mobile unaffected (TOC is not a scroll container there).
This commit is contained in:
Pontoporeia
2026-09-18 16:26:49 +02:00
parent aa72aa5bc5
commit 626970770f
4 changed files with 212 additions and 54 deletions
+9
View File
@@ -136,6 +136,15 @@
padding-right: var(--space-3xs);
}
/* Trailing bottom spacing when the TOC scrolls (long lists). Pseudo-element
(real content in the scroll area) rather than the container's
padding-bottom, which Firefox clips in this nested flex layout. */
.toc::after {
content: "";
display: block;
height: var(--space-xl);
}
.toc summary {
pointer-events: none;
}