From 1de8dcf0d2cd391f3a744f655bd7f68f4bc83349 Mon Sep 17 00:00:00 2001 From: sync-test Date: Fri, 14 Aug 2026 04:30:22 +0530 Subject: [PATCH] fix: coming-soon page text clipping and mobile form collapse Two real rendering bugs, both confirmed via Playwright screenshots against the live page: - h1's line-height: 0.95 was tighter than the font's own ascender/ descender box, clipping the descender off lowercase g/y/p/q/j - visible as the tail of the 'g' in 'Coming' getting cut off. Bumped to 1.08 (still tight/modern, nothing clipped). - On mobile (<=480px), .form switches to flex-direction: column, but .form input's base-rule (meant for the row layout) computes flex-basis to 0% along the now-vertical main axis, overriding its explicit height: 50px and collapsing it to ~18px. Confirmed via getBoundingClientRect: input was rendering at 18px tall vs button's 50px. The 'text not visible against dark background' report wasn't a contrast issue - the input box itself had nearly collapsed, taking its placeholder text down with it. Added flex: none; height: 50px to the mobile media query's input override. Co-Authored-By: Claude Sonnet 5 --- .../nxtgauge-coming-soon/base/configmap-html.yaml | 15 ++++++++++++++- coming-soon/index.html | 15 ++++++++++++++- 2 files changed, 28 insertions(+), 2 deletions(-) diff --git a/apps/nxtgauge-coming-soon/base/configmap-html.yaml b/apps/nxtgauge-coming-soon/base/configmap-html.yaml index 7b38799..c83c5b2 100644 --- a/apps/nxtgauge-coming-soon/base/configmap-html.yaml +++ b/apps/nxtgauge-coming-soon/base/configmap-html.yaml @@ -114,7 +114,11 @@ data: font-size: clamp(44px, 10vw, 86px); font-weight: 900; letter-spacing: -0.04em; - line-height: 0.95; + /* Was 0.95 - tighter than the font's own ascender/descender box, so + descenders (the tail on lowercase g/y/p/q/j - e.g. "Coming") got + clipped at the bottom of the line box. 1.08 keeps the tight, + modern look without cutting anything off. */ + line-height: 1.08; color: #fff; margin-bottom: 26px; } @@ -208,6 +212,15 @@ data: @media (max-width: 480px) { .form { flex-direction: column; } .form input { + /* .form input's base rule sets `flex: 1`, meant for the row layout + above. In a column flex container `flex: 1` computes flex-basis + to 0% along the (now vertical) main axis, which overrides the + explicit height: 50px and collapses the input to ~18px (just its + line box) instead - the placeholder text wasn't a contrast + problem, the input itself was nearly invisible. `flex: none` + keeps it at its real 50px height when stacked. */ + flex: none; + height: 50px; border-right: 1.5px solid rgba(255,255,255,0.12); border-bottom: none; border-radius: 10px 10px 0 0; diff --git a/coming-soon/index.html b/coming-soon/index.html index edef559..eaef007 100644 --- a/coming-soon/index.html +++ b/coming-soon/index.html @@ -111,7 +111,11 @@ font-size: clamp(44px, 10vw, 86px); font-weight: 900; letter-spacing: -0.04em; - line-height: 0.95; + /* Was 0.95 - tighter than the font's own ascender/descender box, so + descenders (the tail on lowercase g/y/p/q/j - e.g. "Coming") got + clipped at the bottom of the line box. 1.08 keeps the tight, + modern look without cutting anything off. */ + line-height: 1.08; color: #fff; margin-bottom: 26px; } @@ -205,6 +209,15 @@ @media (max-width: 480px) { .form { flex-direction: column; } .form input { + /* .form input's base rule sets `flex: 1`, meant for the row layout + above. In a column flex container `flex: 1` computes flex-basis + to 0% along the (now vertical) main axis, which overrides the + explicit height: 50px and collapses the input to ~18px (just its + line box) instead - the placeholder text wasn't a contrast + problem, the input itself was nearly invisible. `flex: none` + keeps it at its real 50px height when stacked. */ + flex: none; + height: 50px; border-right: 1.5px solid rgba(255,255,255,0.12); border-bottom: none; border-radius: 10px 10px 0 0;