fix(public): stop the homepage intake form squeezing its inputs at tablet width - #59
fix(public): stop the homepage intake form squeezing its inputs at tablet width#59nish3451 wants to merge 15 commits into
Conversation
…blet width The two-field lead form shares the .lead class with the checks-section header, whose gap:70px / space-between / flex-end treatment leaked onto the form and, together with the nowrap submit button, squeezed the domain and email inputs to ~100px at tablet width (measured 99/98px at 761px, 103/102px at 768px — and never above 139px, with the "yourwebsite.com" placeholder clipped, at any width). The checks-header rules are now scoped to .checks .lead and the two-field form stacks below its own 900px breakpoint with an explicit gap, so inputs are full-width on tablets (761-900px) and >=208px in the one-line layout at 901px+, matching the /audit form. Mobile (<=390px) is pixel-identical. Static source guards added to scripts/check-site.mjs and the measured unfixed/fixed evidence recorded in docs/evidence/lead-form-tablet-squeeze-2026-08-10.md.
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
nish3451 has reached the 50-credit limit for trial accounts. To continue receiving code reviews, upgrade your plan.
|
Warning Review limit reached
Next review available in: 48 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (3)
Comment |
There was a problem hiding this comment.
nish3451 has reached the 50-credit limit for trial accounts. To continue receiving code reviews, upgrade your plan.
There was a problem hiding this comment.
nish3451 has reached the 50-credit limit for trial accounts. To continue receiving code reviews, upgrade your plan.
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 46f96e6238
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
|
|
||
| ## Exact verification method (reproduce) | ||
|
|
||
| 1. Copy `public/` to `fixed-site/` and serve it on 127.0.0.1:8131 (`python3 -m http.server 8131 --directory fixed-site`). Copy it again to `unfixed-site/` and overwrite `index.css` (and `index.html`, `index.js`, `fonts.js` for a clean tree) with their `origin/main` versions (`git show origin/main:public/index.css > unfixed-site/index.css`), then serve it on 127.0.0.1:8132. |
There was a problem hiding this comment.
Once this change lands and origin/main advances, this command copies the fixed stylesheet into unfixed-site, so both servers render the same version and the documented before/after measurements can no longer be reproduced. Reference the reviewed commit's first parent (preferably its immutable hash) rather than the moving origin/main ref.
Useful? React with 👍 / 👎.
There was a problem hiding this comment.
nish3451 has reached the 50-credit limit for trial accounts. To continue receiving code reviews, upgrade your plan.
There was a problem hiding this comment.
nish3451 has reached the 50-credit limit for trial accounts. To continue receiving code reviews, upgrade your plan.
There was a problem hiding this comment.
nish3451 has reached the 50-credit limit for trial accounts. To continue receiving code reviews, upgrade your plan.
There was a problem hiding this comment.
nish3451 has reached the 50-credit limit for trial accounts. To continue receiving code reviews, upgrade your plan.
There was a problem hiding this comment.
nish3451 has reached the 50-credit limit for trial accounts. To continue receiving code reviews, upgrade your plan.
There was a problem hiding this comment.
nish3451 has reached the 50-credit limit for trial accounts. To continue receiving code reviews, upgrade your plan.
|
You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard. |
There was a problem hiding this comment.
nish3451 has reached the 50-credit limit for trial accounts. To continue receiving code reviews, upgrade your plan.
There was a problem hiding this comment.
nish3451 has reached the 50-credit limit for trial accounts. To continue receiving code reviews, upgrade your plan.
|
You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard. |
|
You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard. |
There was a problem hiding this comment.
nish3451 has reached the 50-credit limit for trial accounts. To continue receiving code reviews, upgrade your plan.
|
You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard. |
There was a problem hiding this comment.
nish3451 has reached the 50-credit limit for trial accounts. To continue receiving code reviews, upgrade your plan.
There was a problem hiding this comment.
nish3451 has reached the 50-credit limit for trial accounts. To continue receiving code reviews, upgrade your plan.
There was a problem hiding this comment.
nish3451 has reached the 50-credit limit for trial accounts. To continue receiving code reviews, upgrade your plan.
There was a problem hiding this comment.
nish3451 has reached the 50-credit limit for trial accounts. To continue receiving code reviews, upgrade your plan.
|
Closing as the stale duplicate in the duplicate open-PR reconciliation (docs/evidence/duplicate-open-pr-clusters-2026-08-11): the identical fix already landed on main via the reprise PR #96 (merged 2026-08-11T02:30Z, commit 6f85c61), so this branch carries zero changes main lacks. This PR is conflict-locked against current main. #96 is the superior delivery path (fresh base, evidence receipt extended with the 2026-08-11 re-verification). |
1 participant
The finding
The homepage intake form (
form.lead.two) squeezed the domain and email inputs to ~100px at tablet width.Root cause: the form shares the
.leadclass with the checks-section header. The header'sgap:70px / justify-content:space-between / align-items:flex-endtreatment (an unscoped.leadselector) leaked onto the form. Combined with the nowrap submit button ("Show me where our site undersells us", 294px), the inputs starved:The "yourwebsite.com" placeholder (needs ~140px of text area) was clipped at every width ≥761px before the fix, including desktop.
The fix
public/index.css— scope the checks-header rules to.checks .lead(desktop + mobile), so the shared class can't leak onto the form. The two-field form's stacked breakpoint moves from 760px to its ownmax-width:900pxwith an explicitgap:18px(previously inherited from the leak). Tablet widths now stack full-width; ≥901px keeps the one-line pill with 208px inputs — matching the identical /audit form, which never had the leak.scripts/check-site.mjs— static source guards pinning the scoping, the 900px breakpoint, the explicit gap, and refusal of a 760px stacking breakpoint.docs/evidence/lead-form-tablet-squeeze-2026-08-10.md— measured unfixed/fixed receipt (real Chromium, fonts loaded), including the mobile-neutrality (390px pixel-identical), checks-header neutrality, and no-overflow checks.Verification
npm run check— passed (new guards included)npm test— 82 tests across all 4 suites, 0 failuresnpm run check:render-blocking— all six pages PASSnpx wrangler deploy --dry-run— OK