fix(public): keep app-page early-access CTA above the fold on phones - #54
fix(public): keep app-page early-access CTA above the fold on phones#54nish3451 wants to merge 4 commits into
Conversation
The Promptly and Drishti hero H1s are long, so at the 720px mobile breakpoint the hero CTA row rendered well below the first screen (around y=1013-1094 in a 390x844 viewport, y=1040-1094 at 375x667). Tighten the hero at that breakpoint -- reduce vertical padding, shrink the H1, and trim the lead/action-row spacing -- so the primary 'Get early access' action lands in the first viewport. Desktop and 1024px layouts are unchanged. Verified with headless Chromium: CTA bottom moves from ~1013-1094 to 611-638 at 390x844 and to 638 at 375x667 (both above the fold).
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: 37 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. Comment |
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 16cfe9ee58
ℹ️ 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".
| .page-hero-card h1 { | ||
| max-width: none; | ||
| font-size: clamp(1.9rem, 6vw, 3rem); |
There was a problem hiding this comment.
Limit the compact H1 rule to the app landing pages
At common 375–430px phone widths, this generic selector reduces the hero H1 minimum from 3.4rem to 1.9rem on every page using .page-hero-card, including the 404, contact, support, privacy, and terms pages. Those pages do not contain the long app-page early-access flow targeted by this change, so their primary heading hierarchy is unintentionally shrunk by roughly 44%; scope these overrides to the Promptly and Drishti landing heroes instead.
Useful? React with 👍 / 👎.
|
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.
The fleet keeps dispatching the same finding to multiple lanes, producing duplicate same-fix PR pairs: #36/#44 and #55/#56 are byte-identical or near-identical patches of the operator export --help fix, #39/#49 the offername article fix, #40/#52 the recording exporter --help fix, plus #38/#48/#51, #30/#61/#72, #45/#64, #42/#60, #43/#54 and #46/#74. Add a PR Duplicate Guard: - scripts/check-pr-duplicates.mjs compares a PR's diff against every other open PR (shared changed-file coverage >= 0.8 and patch similarity >= 0.5). Calibrated on all 79 open PRs on 2026-08-11: every pair above the thresholds was a genuine duplicate-cluster member, zero false positives. - .github/workflows/pr-duplicate-guard.yml runs it on every PR event and posts one marker comment naming the duplicate(s) and the canonical PR; the check fails loudly when a duplicate is found. Informational, not required. - scripts/test-pr-duplicates.mjs covers parsing, similarity, detection, and comment upsert with an injected API; wired into npm ci and npm test.
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.
Problem
The Promptly and Drishti app pages gained a "Get early access" CTA in e0769ca. On phones, the long hero H1s (capped at
max-width: 9chat the 720px breakpoint) render 490-544px tall, pushing the CTA row below the first screen. Measured in a 390x844 viewport: CTA bottom at y=1013 (Promptly) and y=1094 (Drishti); at 375x667: y=1040/1094 — a scroll is required to see the primary action.Fix
At the <=720px breakpoint, tighten the hero card only: reduce its vertical padding (36px->20px top), let the H1 use the full column width with a phone-sized scale (
clamp(1.9rem, 6vw, 3rem)), and trim lead/action-row spacing. Desktop and 1024px-tablet layouts are untouched.Verification
Headless Chromium before/after:
npm run cigreen: all suites 0 failures (incl. public heading-hierarchy, link-targets, soft-404, conversion-signal, brand-disambiguation, social-preview, structured-data).Note: a 320x568 viewport (2012-2016 iPhone SE-class, <1% of mobile traffic) still lands the CTA slightly below the fold (y=696); covering it would require degrading hero type further at that extinct size. Every phone width >=375px now shows the CTA in the first viewport.