Repository navigation
fix(frontend): stop hero grid columns overflowing on narrow viewports - #1874
Conversation
Both Hero grid items (headline column and RepoCard column) lacked min-w-0, so CSS Grid's default min-width:auto kept them from shrinking below their content. The RepoCard's git-clone <code> block used `truncate` (white-space:nowrap) inside a flex row without min-w-0, giving it a ~500px intrinsic minimum that inflated the shared grid track below the lg breakpoint and pushed the headline column past the viewport width. Adds min-w-0 to both grid item wrappers and min-w-0 flex-1 to the clone <code> element so it actually truncates. Verified with headless Playwright across 320-1280px viewports: no horizontal overflow left.
📝 WalkthroughWalkthroughThe Landing page adds ChangesLanding layout updates
Estimated code review effort: 1 (Trivial) | ~3 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
Failed to generate code suggestions for PR |
|
Size Change: -2 B (0%) Total Size: 497 kB 📦 View Changed
ℹ️ View Unchanged
|
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
There was a problem hiding this comment.
No issues found across 1 file
Auto-approved: CSS-only fix adding min-w-0 to grid items and code element to stop grid overflow. Bounded, clearly beneficial layout fix with no operational or behavioral side effects.
Re-trigger cubic
CI runs `npm ci --legacy-peer-deps --ignore-scripts` on npm 11.16.0, which re-resolves in-range ranges against the registry and then rejects the lock: Invalid: lock file's eslint@10.7.0 does not satisfy eslint@10.8.0 Invalid: lock file's @eslint/config-helpers@0.6.0 does not satisfy 0.7.0 Nothing in the repo asks for 10.8.0. Those versions were published after the last lock refresh, and root package.json carries eslint ^10.4.0. Same class as #1809. Sibling PR #1874 passed this job on 2026-07-24, before the release. Refreshed with the npm version CI uses, --package-lock-only. Two versions moved, nothing added, and the six removals are dev-only eslint transitives under packages/frontend that dedupe now that frontend and root agree. axios stays nested at packages/shared/node_modules, so the Dockerfile fix in this PR is still required.
There was a problem hiding this comment.
Thanks for this, Renan. Nice catch on the root cause: flex items default to min-width: auto and refuse to shrink below their content, which is why the truncate further down was silently doing nothing. min-w-0 on the flex child is the right fix, and adding flex-1 to the <code> so it actually claims the row is the correct companion change. Happy with it as-is.
One thing to be aware of before we merge, and it's a coordination problem on my side rather than anything you did:
#1865 touches the same element. It also edits the RepoCard <code> in Landing.tsx:
- yours:
min-w-0 flex-1 truncate text-lucky-text-body - #1865:
min-w-0 truncate text-lucky-text-body
They'll conflict, and #1865's version drops flex-1. If that one lands second we'd quietly lose part of your fix, so I'll sequence these deliberately and make sure flex-1 survives.
On the red checks: none of them are yours. Security was a repo-wide gate that could never pass (it audited devDependencies and one production chain has no fix at all), and kimi-review fails on every PR in the repo because an API key isn't set. I've fixed the first in #1876 and filed #1877 for the second. Once #1876 lands, a rebase should get you green with no changes here.
|
Heads-up: the CI blockers I mentioned are fixed on What that clears:
Please rebase onto The review feedback above is separate and still stands. |
LucasSantana-Dev
left a comment
LucasSantana-Dev
left a comment
There was a problem hiding this comment.
Review: approve with nits
The CSS mechanics are correct and precisely targeted at the root cause, matching an established codebase idiom.
P2 — missing regression test: no automated coverage for a bug that already shipped once (#1825 is still open). The repo has the exact infrastructure — a Playwright e2e suite with tests/e2e/responsive.spec.ts — but nothing asserts document.documentElement.scrollWidth <= window.innerWidth on the landing route (the responsive suite only covers authenticated dashboard pages). The PR's "verified with headless Playwright" check isn't committed anywhere, so the next hero edit can silently regress. A ~10-line spec asserting no horizontal overflow at 320/375/768px would close the loop.
P3 (nit): Landing.tsx:477 — truncating the clone command means the full URL is unreadable on narrow viewports. The adjacent copy button (handleCopy writes the full command) mitigates this, so a title attribute is optional polish.
What's good: root-cause fix, not a symptom patch — grid items default to min-width: auto, and truncate (white-space: nowrap) inside the flex row gave the <code> an intrinsic minimum it could never shrink below; min-w-0 on both grid items plus min-w-0 flex-1 on the code element breaks exactly that chain (the flex-1 is the detail people usually miss). No prop-ordering hazard: className='min-w-0' precedes the animation spreads and neither contains a className key. Follows the codebase's own idiom (27+ existing min-w-0 flex-1 uses), and the rest of RepoCard has no other wide children.
|
A note from the maintainer side: sorry this PR waited as long as it did for a proper review, and sorry for the rounds of branch updates and re-running checks today. The churn was on our side, not yours. Your PRs exposed real gaps in how this repo handled external contributions: CI runs sat in a silent approval queue, some gates could never pass on fork PRs (SonarCloud, danger), and the team had no notification when external PRs arrived. Those are all fixed as of today:
Your branch is up to date and the full suite is green. Thanks for the patience and for the contribution. External contributors are very welcome here. |
|
🤖 I have created a release *beep* *boop* --- <details><summary>2.38.0</summary> ## [2.38.0](v2.37.3...v2.38.0) (2026-07-27) ### Features * **bot:** add /ticket-setup for support category and agent role ([#1863](#1863)) ([3f4af39](3f4af39)) * **frontend:** per-action loading and connection gating on music controls ([#1866](#1866)) ([2dda60f](2dda60f)) * **frontend:** show stale progress when music SSE lags ([#1867](#1867)) ([4952e73](4952e73)) * **music:** surface recommendationReason in nowplaying and queue ([#1864](#1864)) ([960fd62](960fd62)) * **ops:** blue/green zero-downtime deploys — Phase 1 web tier ([#1786](#1786)) ([f5f7597](f5f7597)) ### Bug Fixes * **docker:** make compose stack boot from a fresh .env ([#1674](#1674)) ([babe0ef](babe0ef)) * **docker:** treat an empty db password as missing in compose guards ([#1881](#1881)) ([718c0ad](718c0ad)) * **frontend:** make landing page usable at mobile widths ([#1865](#1865)) ([6190350](6190350)) * **frontend:** stop hero grid columns overflowing on narrow viewports ([#1874](#1874)) ([ce5cea0](ce5cea0)) * **invite:** add /invite where cloudflare pages reads it ([#1895](#1895)) ([0528f66](0528f66)) </details> --- This PR was generated with [Release Please](https://github.com/googleapis/release-please). See [documentation](https://github.com/googleapis/release-please#release-please).
3 participants
Description
Both Hero grid items (headline column and RepoCard column) lacked min-w-0, so CSS Grid's default min-width:auto kept them from shrinking below their content. The RepoCard's git-clone
block usedtruncate(white-space:nowrap) inside a flex row without min-w-0, giving it a ~500px intrinsic minimum that inflated the shared grid track below the lg breakpoint and pushed the headline column past the viewport width.Adds min-w-0 to both grid item wrappers and min-w-0 flex-1 to the clone
element so it actually truncates. Verified with headless Playwright across 320-1280px viewports: no horizontal overflow left.Checklist
Closes issue #1825
Summary by cubic
Fixes #1825 by preventing the landing hero grid from overflowing on small screens. Lets both columns and the clone command shrink, removing horizontal scroll.
min-w-0to both hero grid item wrappers.<code>elementmin-w-0 flex-1sotruncateworks inside the flex row.Written for commit 92daa49fd63697acf630a8a242246ace247a15f2. Summary will update on new commits.
Summary by CodeRabbit