fix(home): keep the hero mock and its flags inside the viewport below 320px - #176
Conversation
… 320px
The .browser/.mock appraisal hero card overflows below ~252px viewports:
the absolutely-positioned nowrap .flag annotations ("1 NO PRICE, ANYWHERE",
"2 ONE IDEA, TEN HOOKS", "3 NOTHING ANSWERED") stretch the card past the
viewport (doc scrollWidth 252 at a 240px viewport; flags to right=304).
The 320/360/390 sweep never caught it because the flags only overflow
below ~320px.
Give the .spec grid column and the card min-width:0 so the column can
shrink below its content's intrinsic width, cap the card at max-width:100%,
let the flag text wrap (white-space:normal, max-width:100%), and in the
mobile block anchor the flags to the card's right padding edge so they
always fall inside it. Let the two-column spec rows and the who-banner
label wrap at the same sub-340px widths.
Add scripts/test-narrow-viewport.mjs, a real-Chromium regression serving
the homepage (/, /appraisal, /desk — the latter two resolve to the
homepage) over node:http that asserts, at 240/260/280/320px viewports, that
doc scrollWidth equals clientWidth, the hero card's right edge stays inside
the viewport, and every flag stays inside the card. Wired into npm test as
test:narrow alongside the sibling test:narrow-pages.
Co-authored-by: CommandCodeBot <noreply@commandcode.ai>
|
You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard. |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Free Run ID: 📒 Files selected for processing (3)
📝 WalkthroughWalkthroughThe change adds responsive rules for narrow specimen layouts and introduces a Playwright regression test. The test serves the public pages locally, checks three routes at four viewport widths, and runs through the aggregate ChangesNarrow viewport handling
Estimated code review effort: 3 (Moderate) | ~20 minutes Merge Risk: ⚪ Minimal · up to The change keeps the hero card, annotations, and related mobile content within narrow viewports while adding regression coverage; no actionable merge-blocking risk remains beyond normal checks. Note 🎁 Summarized by CodeRabbit FreeYour organization is on the Free plan. CodeRabbit will generate a high-level summary and a walkthrough for each pull request. For a comprehensive line-by-line review, please upgrade your subscription to CodeRabbit Pro by visiting https://app.coderabbit.ai/login. Comment |
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
There was a problem hiding this comment.
Your trial has ended. Reactivate Greptile to resume code reviews.
…nt main and live (2026-08-15) (#231) The 44px tap-target fix (PR #48, extended by #70) still holds on the current head: npm run check passes with the tap-target guard pinning the >=44px rules in all five stylesheets, and the full test suite passes (242 tests, 0 failures), including the narrow-viewport Chromium regressions from #174 and #176. Since the 2026-08-14 receipt (base 7ad776a), three commits touched the surface: #176 and #174 (index.css/shared.css layout-only changes that did not move any tap-target rule) and #202/#193 (llms.txt/offer.md text and URLs only). Fresh headless-Chromium full-element sweeps at 390x844 on a local static copy of public/ and on the live deployment show every standalone interactive element on all seven served pages is >=44px in height and width (logo 50, nav links 45, nav CTA 47, lead CTA 44, footer links 44-45, .back 45, in-content CTAs 46, Agent Desk controls 44-65.2); the only sub-44px elements are inline text links inside sentences (.xa1/.xi19/.xp1), exempt under the WCAG 2.5.8/2.5.5 Inline exception and intentionally excluded. All seven live pages serve 200 and match main element-for-element. The finding stays closed with no code change. Co-authored-by: nish3451 <nish3451@users.noreply.github.com> Co-authored-by: CommandCodeBot <noreply@commandcode.ai>
1 participant
Packet
sol-sweep fix packet
product-live/tinystudio-io-hero-mock-240px-overflow(lane deepseek).
Defect
The
.browser/.mockappraisal hero card at 240px viewport grows to 252px:doc scrollWidth 252 vs clientWidth 240; the absolutely-positioned nowrap
.flagannotations sit at left=161..304, past the 240px edge. The320/360/390 sweep never caught it.
Change
public/index.css:min-width:0on the.specgrid column, the card and.specbody;max-width:100%on the card;.flaggetswhite-space:normal+max-width:100%; in the mobile block the flags areanchored to the card's right padding edge (
right:30px,max-width:calc(100% - 60px)) and the two-column spec rows + who-bannerlabel wrap instead of pushing the document sideways.
scripts/test-narrow-viewport.mjs: real-Chromium regression on/,/appraisal,/deskat 240/260/280/320px asserting doc scrollWidth ==clientWidth, card right edge inside viewport, and every flag inside the
card. Wired into
npm testastest:narrow(sibling to the existingtest:narrow-pages).Proof (re-runnable)
node scripts/test-narrow-viewport.mjsin the worktree:origin/mainCSS: fails at every viewport (240px: doc 252 != 240;flags to right=304; 320px: flags to right=337 beyond card right 300).
at 240px, 240 at 260px, 260 at 280px, 300 at 320px; doc sw == cw).
Full suite green:
npm run check, headings, viewport, contract, sitemap,worker 76/76, ui 16/16,
test:narrow-pagesall routes pass.Report:
/home/nish/workspaces/agent-state/sol-sweep/fix-packets/REPORT-product-live-tinystudio-io-hero-mock-240px-overflow.mdSummary by CodeRabbit
Bug Fixes
Tests