Use flexbox instead of grid for row alignment (old GeckoView fix) #4

Merged

eddie merged 1 commit from tv-flexbox-row-alignment into main

2026-09-05 10:19:48 -07:00

eddie commented

2026-09-05 10:19:42 -07:00

Owner

What was happening

.score-row laid out its three children with CSS Grid
(grid-template-columns: auto 1fr auto) and centered them with
align-items: center. The rank badge next to it uses plain flexbox
centering and was never reported as broken - only the grid-based row was.
Grid's alignment behavior has a real history of being less consistently
implemented across engines and versions than flexbox's, particularly in
embedded ports like GeckoView, which can lag behind desktop Gecko on engine
fixes.

Fix

This row is a plain fixed | grow | fixed layout - one row, three items, no
2D structure actually needed. Grid was the wrong tool for it even before
this bug showed up. Switched to flexbox, which is older, simpler for this
shape, and has always been the safer bet for cross-engine reliability.
.player-name gets flex: 1 in place of the grid column's 1fr, with
min-width: 0 so it can still shrink for the ellipsis (flex items default
to min-width: auto, which blocks that - flexbug #1).

Testing

Confirmed byte-identical output in Chromium (same screenshot size as the
last verified-good render) and pixel-identical in desktop Firefox, so this
changes nothing for engines where grid already worked - it only removes a
failure mode for the ones where it didn't. I don't have access to an actual
GeckoView/Android device to test directly.

Reported from the actual TV (a GeckoView-based browser, likely an older build): every element in a row - rank badge, name, score, all of them together - was shifted down and not vertically centered. Worked fine on desktop Chromium and desktop Firefox. ## What was happening `.score-row` laid out its three children with CSS Grid (`grid-template-columns: auto 1fr auto`) and centered them with `align-items: center`. The rank badge next to it uses plain flexbox centering and was never reported as broken - only the grid-based row was. Grid's alignment behavior has a real history of being less consistently implemented across engines and versions than flexbox's, particularly in embedded ports like GeckoView, which can lag behind desktop Gecko on engine fixes. ## Fix This row is a plain fixed | grow | fixed layout - one row, three items, no 2D structure actually needed. Grid was the wrong tool for it even before this bug showed up. Switched to flexbox, which is older, simpler for this shape, and has always been the safer bet for cross-engine reliability. `.player-name` gets `flex: 1` in place of the grid column's `1fr`, with `min-width: 0` so it can still shrink for the ellipsis (flex items default to `min-width: auto`, which blocks that - flexbug #1). ## Testing Confirmed byte-identical output in Chromium (same screenshot size as the last verified-good render) and pixel-identical in desktop Firefox, so this changes nothing for engines where grid already worked - it only removes a failure mode for the ones where it didn't. I don't have access to an actual GeckoView/Android device to test directly.

eddie added 1 commit

2026-09-05 10:19:43 -07:00

Use flexbox instead of grid for row alignment (old GeckoView fix) cdcb1ebb3d

Reported from the actual TV (a GeckoView-based browser, likely an older
build): every element in a row - rank badge, name, score, all of them
together - was shifted down and not vertically centered. Worked fine on
desktop Chromium and desktop Firefox.

.score-row laid out its three children with CSS Grid (grid-template-columns:
auto 1fr auto) and centered them with align-items: center. The rank badge
next to it uses plain flexbox centering and was never reported as broken -
only the grid-based row was. Grid's alignment behavior has a real history of
being less consistently implemented across engines and versions than
flexbox's, particularly in embedded ports like GeckoView, which can lag
behind desktop Gecko on engine fixes.

This row is a plain fixed | grow | fixed layout - one row, three items, no
2D grid structure actually needed. Grid was the wrong tool for it even before
this bug showed up. Switched to flexbox, which is older, simpler for this
shape, and has always been the safer bet for cross-engine reliability.
.player-name gets flex:1 in place of the grid column's 1fr, with min-width:0
so it can still shrink for the ellipsis (flex items default to
min-width:auto, which blocks that - flexbug #1).

Confirmed byte-identical output in Chromium (same screenshot size as the
last verified-good render) and pixel-identical in desktop Firefox, so this
changes nothing for engines where grid already worked - it only removes a
failure mode for ones where it didn't. Can't test actual GeckoView/Android
directly from here.

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

eddie merged commit 0c0dfa28cd into main

2026-09-05 10:19:48 -07:00

eddie deleted branch tv-flexbox-row-alignment

2026-09-05 10:19:48 -07:00

eddie referenced this pull request from a commit

2026-09-05 10:19:50 -07:00

Merge pull request 'Use flexbox instead of grid for row alignment (old GeckoView fix)' (#4) from tv-flexbox-row-alignment into main