fix(public): keep app-page early-access CTA above the fold on phones - #43
fix(public): keep app-page early-access CTA above the fold on phones#43nish3451 wants to merge 3 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=980-1110 in a 390x844 viewport). 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. Co-authored-by: CommandCodeBot <noreply@commandcode.ai>
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.
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (1)
📝 WalkthroughWalkthroughThe mobile ChangesMobile hero card layout
Estimated code review effort: 1 (Trivial) | ~2 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches 💡 1🛠️ Fix failing CI checks 💡
🧪 Generate unit tests (beta)
Comment |
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 65bd3c2145
ℹ️ 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 phone heading override to app landing pages
At widths up to 720px, this selector also matches every other secondary-page hero, including /contact/, /support/, /privacy/, the app support/privacy pages, and the 404 page. Their headings therefore drop from the existing 3.4rem minimum to 1.9rem on typical phones even though they do not have the long app-page CTA problem, causing a substantial unrelated typography regression; scope this override to the Promptly and Drishti landing heroes, for example via their .app-status structure or a dedicated class.
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.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: f3bfb3eeec
ℹ️ 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".
| bury the action row below the fold on phones. */ | ||
| .page-hero-card h1 { | ||
| max-width: none; | ||
| font-size: clamp(1.9rem, 6vw, 3rem); |
There was a problem hiding this comment.
Keep the CTA visible on 320px phones
On a 320×568 viewport (the original iPhone SE size), the 1.9rem minimum still leaves the long Promptly and Drishti headings at roughly four lines; after the mobile header, lead copy, and margins, the primary action lands below the first viewport. The verification only covers widths of 375px and above, so the stated phone fix remains incomplete for narrower supported viewports; add a narrower breakpoint or otherwise compact the app hero at these widths.
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.
Problem
The Promptly and Drishti app pages recently gained a "Get early access" CTA (e0769ca). On phones, the long hero H1s pushed the CTA row below the first screen — in a 390×844 viewport the CTA bottom landed around y=980–1110, requiring a scroll to see the primary action.
Fix
At the ≤720px breakpoint, tighten the hero card: reduce its vertical padding, shrink the H1 (
clamp(1.9rem, 6vw, 3rem), remove the max-width cap), and tighten the lead and action-row spacing. The CTA now lands inside the first viewport on both pages.Verification
Headless Chromium before/after at 390×844 and 375×667 (iPhone 12/SE sizes):
Desktop (1440px) and tablet (900px) rendering unchanged; no horizontal overflow;
npm testgreen (all suites pass).Summary by CodeRabbit