ashwin/nxtgauge-gitops
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: coming-soon page text clipping and mobile form collapse

Browse source 
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 <noreply@anthropic.com>
This commit is contained in:
sync-test 2026-08-14 04:30:22 +05:30
parent e752326411
commit 1de8dcf0d2
2 changed files with 28 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
apps/nxtgauge-coming-soon/base/configmap-html.yaml
View file

@ -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;

15
coming-soon/index.html
View file

@ -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;