PostERG/xamxam
1
0
Fork 0
mirror of https://codeberg.org/PostERG/xamxam.git synced 2026-09-25 01:53:03 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix(css): restore bottom spacing on content pages in Firefox

Browse Source 
apropos/licence/charte use .page-content as a nested scroll container
(overflow-y:auto) inside html/body {height:100%; overflow:hidden} flex.
Firefox drops/clips that container's own padding-bottom (and last-child
margin) from the scrollable area -- scrollHeight came out ~80px short and
the last ~80px of content was unreachable. Chromium honours the padding.

Move the trailing space off the container padding onto a real content
spacer (.page-content > article::after, display:block; height) which both
browsers count as scrollable content. Verified via Playwright (Chromium +
Firefox): delta between article and scrollHeight is now 0 in both on all
three pages, consistent at all breakpoints. not-found unaffected (loads
its own not-found.css). 294 PHPUnit tests pass.
This commit is contained in:
Pontoporeia
2026-09-18 16:26:49 +02:00
parent b1715b210d
commit beff95c784
2 changed files with 21 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/public/assets/css/content-page.css
+20 -4
View File
@@ -14,7 +14,11 @@
overflow-y: auto;
overflow-x: hidden;
scroll-behavior: smooth;
padding: var(--space-xl) var(--space-l) var(--space-2xl);
/* Bottom spacing lives on .page-content > article::after (below): Firefox
drops/clips the scroll container's own padding-bottom in this nested flex
layout, while Chromium honours it — moving the pad into a block pseudo
element keeps both browsers consistent. */
padding: var(--space-xl) var(--space-l) 0;
display: grid;
grid-template-columns: 180px 1fr;
gap: var(--space-2xl);
@@ -36,7 +40,7 @@
.page-content {
grid-template-columns: 1fr;
gap: var(--space-l);
padding: var(--space-m) var(--space-s) var(--space-xl);
padding: var(--space-m) var(--space-s) 0;
}
.page-content > article {
@@ -65,7 +69,19 @@
line-height: 1.6;
color: var(--text-primary);
font-weight: 300;
/* padding-bottom: var(--space-xl); */
}
/* Trailing bottom spacing. Pseudo-element (real content in the scroll area)
rather than the container's padding-bottom, which Firefox clips. */
.page-content > article::after {
content: "";
display: block;
height: var(--space-2xl);
}
@media (max-width: 767px) {
.page-content > article::after {
height: var(--space-xl);
}
}
.page-content > article * {
@@ -259,7 +275,7 @@
@media (max-width: 600px) {
.page-content {
padding: var(--space-m) var(--space-s) var(--space-xl);
padding: var(--space-m) var(--space-s) 0;
}
.page-content > article {