Fix horizontal overflow on public Test pages at narrow viewports - #37
Merged
Conversation
Two independent overflow sources on /tests/[slug] at ~390px: 1. Prompt/system-prompt/settings render in <pre> blocks inside .context-grid with default white-space:pre and grid items defaulting to min-width:auto, so one long unbroken line pins the grid (and the whole page) to that line's width. Add min-width:0 to the grid cards and pre-wrap/overflow-wrap to the pre, matching the existing .run-evidence/.transcript-panel pre patterns. 2. .artifact-image combines min-height:280px with aspect-ratio:16/10, forcing a 448px minimum width below ~472px viewport. Add a min-height:0 override inside a max-width:640px media query placed after the base rule so it wins the cascade (media queries add no specificity). Also guard .showcase-hero > div and .showcase-spec rows (long model names/versions) with min-width:0 and overflow-wrap:anywhere. Verified at a true 390px viewport (Chrome CDP device-metrics override, pageWidth = documentElement.scrollWidth): before 1013px overflow, after 390px no overflow. Independent confirmations: 770->375, 698->390, 2603->390 across three separate harnesses.
![devin-ai-integration[bot]](https://avatars.githubusercontent.com/in/811515?s=60&v=4){kind=small}
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
On public Test pages (
/tests/[slug]), a 390px-wide screen stretched to ~760px+ and forced sideways scrolling.Two independent overflow sources, confirmed by four independent reproductions:
<pre>content — the prompt / system prompt / settings blocks in the TEST DETAILS section render in<pre>inside.context-gridwith defaultwhite-space: pre, and the grid cards default tomin-width: auto. One long unbroken line (URL, seed, minified value) pins the grid — and the whole page — to that line's width..artifact-imagecombinesmin-height: 280pxwithaspect-ratio: 16/10, forcing a 448px minimum width below ~472px viewport, so any Test with image evidence still side-scrolled after fixing theprepath alone.Fix (CSS only,
app/globals.css, +35 lines)min-width: 0on.context-grid > article,.showcase-hero > div,.showcase-spec(and its rows) so grid/flex items can shrink below content width..context-grid > article > pre:pre-wrap,overflow-wrap: anywhere,word-break: break-word,overflow-x: auto— wraps long lines instead of widening the page (matches the existing.run-evidence pre/.transcript-panel prepatterns)..artifact-image { min-height: 0 }inside amax-width: 640pxmedia query placed after the base rule — same specificity, later declaration wins; media queries add no specificity, so placement matters (verified: placed in the earlier media block, the override loses to the base rule at line ~2763 and the overflow remains).overflow-wrap: anywhereon.showcase-spec strong/smallfor long model names/versions.Desktop layout unchanged.
Proof (390px viewport,
pageWidth = document.documentElement.scrollWidth, overflow = scrollWidth > clientWidth)Different BEFORE magnitudes reflect different fixture content (width follows the longest unbroken line) — same mechanism, same fix. Second path in isolation: 460px overflow → 390px clean with the
.artifact-imageoverride.Before/after screenshots (390px @2x, this exact patch): see
benchmax-elife-before-overflow.png/benchmax-elife-after-fix.png(shared with the team; will attach here when the upload endpoint recovers).