From 6b1e41c187ab667840831bf2dbb77174842ab86e Mon Sep 17 00:00:00 2001 From: hz Date: Sat, 25 Jul 2026 10:53:53 -0500 Subject: [PATCH] Fix loading-screen sizing shift from the Inter font swap font-display: swap paints with the fallback font stack first, then swaps to Inter once the 876KB variable font finishes downloading. .loader-wordmark was already width-fixed from an earlier centering fix, but .loader-tagline, .loader-message, and .progress-percent had no explicit width and (more importantly) used line-height: normal, which is derived from each font's own metrics - Inter and the fallback stack disagree by 3-4px per line. Those three deltas summed exactly to the .loader column's total 10px height change, which is what visibly shifted the whole centered loading screen once the swap happened. Gave the width-dependent elements width: 100% (matching the wordmark) and gave all three text elements an explicit unitless line-height (computed from font-size, not font metrics) so their box size no longer depends on which font is currently active. Verified empirically: forced the fallback font stack on the live page and diffed getBoundingClientRect() against Inter for every loader element - all width/height deltas are 0 after the fix (previously up to 17.5px width / 10px cascaded height). --- web/medmind_shell.html | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/web/medmind_shell.html b/web/medmind_shell.html index c6c5b4b..345dbfe 100644 --- a/web/medmind_shell.html +++ b/web/medmind_shell.html @@ -209,7 +209,9 @@ font-size: clamp(20px, 2.3vw, 28px); font-weight: 430; letter-spacing: 0; + line-height: 1.3; margin: 17px 0 clamp(36px, 6vh, 54px); + width: 100%; } .progress-row { @@ -241,6 +243,7 @@ font-size: 22px; font-variant-numeric: tabular-nums; font-weight: 650; + line-height: 1.3; min-width: 60px; } @@ -248,8 +251,10 @@ color: var(--muted); font-size: 19px; letter-spacing: 0; + line-height: 1.3; margin: 24px 0 0; text-align: center; + width: 100%; } #status-notice {