Make the scoreboard scale with the real viewport, not assumed 1920x1080 #3

Merged

eddie merged 1 commit from tv-viewport-relative-scaling into main

2026-09-05 10:08:24 -07:00

eddie commented

2026-09-05 10:08:10 -07:00

Owner

Root cause

Every size in the previous CSS was a fixed px value tuned for exactly
1920x1080. Whatever the TV's browser actually renders at internally (device
pixel ratio, a scaled internal resolution, kiosk-app zoom - not something
inspectable remotely) evidently isn't a clean 1920x1080 canvas, so the
design was overflowing 100vh (pushing the last two rows per column below the
fold) and its column-width assumptions no longer held for the two longer
names.

Confirmed with Canvas measureText this was never a space problem at
1920x1080 - even "ARMANDO" only ever needed 178px of a ~530px budget. Every
dimension that participates in the fit (padding, gaps, font sizes, the rank
badge) is now vh/vw instead of px, so the same comfortable margin holds
regardless of the real viewport.

Title dead space

The title uses the same Pricedown font as player names, so it had the exact
same low-baseline issue fixed in the previous PR - same measured correction
(translateY(-0.175em)) applied.

Also

Added overflow: hidden on the page itself. Chained vh/vw percentages round
to whole px at slightly different points depending on the exact viewport,
and the design's entire premise is that it never scrolls - enforcing that
directly is safer than chasing sub-pixel rounding across browsers.

Testing

Verified at 1920x1080 and 1280x720 with a diagnostic script measuring actual
getBoundingClientRect positions (not just eyeballing screenshots): both
render identically to the previously-tested production design, with about
5% of vertical headroom to spare in both cases.

Three more bugs reported from the actual TV: Armando, Gus, Teresa and Tino (the last two rows of each column) were missing entirely, both Miguels were truncating to "MIGUE...", and there was visible dead space above the title. ## Root cause Every size in the previous CSS was a fixed px value tuned for exactly 1920x1080. Whatever the TV's browser actually renders at internally (device pixel ratio, a scaled internal resolution, kiosk-app zoom - not something inspectable remotely) evidently isn't a clean 1920x1080 canvas, so the design was overflowing 100vh (pushing the last two rows per column below the fold) and its column-width assumptions no longer held for the two longer names. Confirmed with Canvas `measureText` this was never a space problem at 1920x1080 - even "ARMANDO" only ever needed 178px of a ~530px budget. Every dimension that participates in the fit (padding, gaps, font sizes, the rank badge) is now vh/vw instead of px, so the same comfortable margin holds regardless of the real viewport. ## Title dead space The title uses the same Pricedown font as player names, so it had the exact same low-baseline issue fixed in the previous PR - same measured correction (`translateY(-0.175em)`) applied. ## Also Added `overflow: hidden` on the page itself. Chained vh/vw percentages round to whole px at slightly different points depending on the exact viewport, and the design's entire premise is that it never scrolls - enforcing that directly is safer than chasing sub-pixel rounding across browsers. ## Testing Verified at 1920x1080 and 1280x720 with a diagnostic script measuring actual `getBoundingClientRect` positions (not just eyeballing screenshots): both render identically to the previously-tested production design, with about 5% of vertical headroom to spare in both cases.

eddie added 1 commit

2026-09-05 10:08:10 -07:00

Make the scoreboard scale with the real viewport, not assumed 1920x1080 26ffaa7773

Two more bugs reported from the actual TV: four players (Armando, Gus,
Teresa, Tino - the last two rows of each column) were missing entirely, and
both Miguels were truncating to "MIGUE...". Also: visible dead space above
the title.

All three came from the same root cause. Every size in the previous CSS was
a fixed px value that only produces the intended layout at exactly
1920x1080. Whatever the TV's browser actually renders at internally (device
pixel ratio, a scaled internal resolution, kiosk-app zoom - not something I
can inspect remotely) evidently isn't that, so the design was overflowing
100vh (pushing the last two rows per column below the fold) and its column
width assumptions no longer held for the two longer names.

Every dimension that participates in the fit - padding, gaps, font sizes,
the rank badge - is now vh/vw instead of px. Confirmed with Canvas
measureText this was never a 1920x1080 space problem (even "ARMANDO" only
ever needed 178 of a ~530px budget); the fix is letting that same
comfortable margin hold at whatever the real viewport turns out to be.
Verified at 1920x1080 and 1280x720: both render identically to the tested
production design with about 5% of vertical headroom to spare.

The title uses the same Pricedown font as player names, so it had the exact
same low-baseline issue fixed in the last commit (this is what read as dead
space above it) - same measured correction applied.

Also added overflow:hidden on the page itself: chained vh/vw percentages
round to whole px at slightly different points depending on the exact
viewport, and the design's entire premise is that it never scrolls - so
enforce that directly rather than chase sub-pixel rounding across browsers.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

eddie merged commit 3e8bf3206b into main

2026-09-05 10:08:24 -07:00

eddie deleted branch tv-viewport-relative-scaling

2026-09-05 10:08:24 -07:00

eddie referenced this pull request from a commit

2026-09-05 10:08:25 -07:00

Merge pull request 'Make the scoreboard scale with the real viewport, not assumed 1920x1080' (#3) from tv-viewport-relative-scaling into main