Build log
CI repair: the 18 pixels that only Linux could see
How an anonymous CI failure became a reproducible 18-pixel mobile overflow and a stronger browser-reporting system.
Source: Public GitHub Actions, production build and 320-pixel browser verification record
Technical bibliography record
The build, in five parts.
- 01 Built
- Actionable GitHub test reports, stricter mobile geometry checks, a bounded video-data fallback and a repaired shrinkable homepage grid.
- 02 Process
- Repeated hosted runs progressively removed false offenders until the real document-edge owner—a 338-pixel grid inside a 320-pixel viewport—was isolated.
- 03 Learned
- A CI failure without the failing test and geometry is barely evidence; diagnostics must narrow the search on every rerun.
- 04 Skills
- Playwright diagnosticsGitHub ActionsCSS gridmobile overflowfault isolation
- 05 Saved
- Annotated CI reports, offender geometry, 28-test browser coverage, production CSS readback and the exact successful deployment runs.
Visual QA and product evidence
See the milestone, not only the summary.
The failure#
Local Chromium passed while hosted Linux failed with no test name or report. Once annotations were enabled, the homepage measured 338 pixels inside a 320-pixel viewport because an implicit grid track refused to shrink.
The process#
Successive diagnostics separated clipped SVG descendants from real document-edge owners. The final repair used a minmax(0, 1fr) track and min-width: 0, while YouTube fetching gained a deadline and committed fallback so scheduled builds could not hang indefinitely.
Production proof#
The 28-test suite, Lighthouse, scheduled deployment and live 320-pixel Chromium geometry all passed on 30 July with clientWidth equal to scrollWidth.