From bf553649203df87e0d521d0129e589f3572bb1e9 Mon Sep 17 00:00:00 2001 From: Vuong Hoang Date: Wed, 23 Sep 2026 06:56:35 -0700 Subject: [PATCH] fix(theme): at phone width the JS-off rail fallback is the measured worst case booth-dev suggested this. At or below 480px, .item's scroll-margin fallback is 205px, the 16-group rail measured at 390px. With JS on, --rail-h is exact and nothing changes. Measured on the same 76 jumps: - JS off: 0 under the rail, previously 19. At 390px, where a short rail gets the full fallback, tiles overshoot by at most 74px, and they stay visible. - JS on: unchanged, 0 under. 660 passed; visual order still matches document order on 32 renders. --- booth/templates/base.html | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/booth/templates/base.html b/booth/templates/base.html index 325d4cd..d334641 100644 --- a/booth/templates/base.html +++ b/booth/templates/base.html @@ -622,6 +622,14 @@ .bench-add input[type=url]{flex:2;min-width:0} .bench-add input[type=text]{flex:1;min-width:0} + /* JS-off fallback at phone width (booth-dev's suggestion, 2026-09-23): the + rail wraps tallest here, so the fallback is the MEASURED worst case — + 205px, the 16-group live maximum at 390px. Overshooting a short rail + leaves the tile visible; undershooting hides it. JS on, --rail-h is exact + and this changes nothing. */ + @media (max-width:480px){ + .item{scroll-margin-top:calc(var(--rail-h, 205px) + 12px)} + } @media (max-width:600px){ main{padding:20px 16px 40px} .topbar{padding:12px 16px}