fix(public): keep product hero early-access CTA in the first mobile viewport - #147
Conversation
…iewport The Promptly and Drishti hero H1s render at 7vw with a 9ch cap, so on 320-414px phones the heading alone was ~540px tall and pushed the newly added "Get early access" button below the fold (~1035px+ on a 844px viewport), under the long lead paragraph. Bring the CTA up by: - scaling .page-hero-card h1 down on mobile (clamp 2.1-3.4rem, no ch cap) so the heading no longer consumes over half the viewport - moving the hero action-row above the page-lead in both product pages, so the CTA is the first thing after the heading on narrow screens The two-column desktop hero layout is unchanged. Extend the existing 320/390px Playwright layout probe to assert the early-access CTA is fully within the first viewport on both pages, so the burying cannot regress. Co-authored-by: CommandCodeBot <noreply@commandcode.ai>
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.
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 (5)
📝 WalkthroughWalkthroughThe update moves Promptly and Drishti hero action links before their descriptive paragraphs, adjusts mobile hero heading styles, and expands browser checks for CTA visibility and text at mobile widths. ChangesMobile hero CTA
Estimated code review effort: 2 (Simple) | ~10 minutes Merge Risk: ⚪ Minimal · up to The PR keeps the early-access CTA within the first mobile viewport through localized layout changes; no actionable merge-blocking risk remains. 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.
…xed on main (PR #147) (#185) The Promptly and Drishti mobile heroes buried the Get early access CTA below the first viewport because the shared clamp(3.4rem, 7vw, 6.7rem) H1 with a 9ch cap made the long hero H1s ~544px tall and the action-row sat after the page-lead. Fixed in 2796b33 (PR #147): mobile-only .page-hero-card h1 clamp(2.1rem, 5.6vw, 3.4rem) with max-width: none, and the hero .action-row moved above .page-lead on both pages. Re-verified against fresh origin/main: the layout probe in scripts/test-public-heading-hierarchy.mjs passes (93 checks, 0 failures), and headless-Chromium measurements at 320/390/414 widths show the CTA at 469-584px — fully in-fold — on both pages (before: ~1035-1164px). No source change is possible or needed; this report documents the verification. Co-authored-by: CommandCodeBot <noreply@commandcode.ai>
…eady fixed in PR #147, harden the regression guard in #190 Re-verified the Promptly and Drishti mobile hero fold for the Get early access CTA against fresh origin/main: - Playwright probe across all 24 combinations of widths 320/360/390/414 and heights 667/740/844 puts the CTA fully in-fold on both pages. Worst bottom/vh ratio is 0.876 (Promptly 320). - The committed guard in scripts/test-public-heading-hierarchy.mjs claims 'fully within the first mobile viewport' but only checks partial intersection, and never tests the 667px iPhone-SE height. - Tightened the predicate to require the CTA bottom to be inside 95% of the viewport, and added a 390x667 measurement on each product page. Synthetic partial regression now fails the guard on both pages. - Source-only change to scripts/test-public-heading-hierarchy.mjs (+10/-7). The CSS and DOM-order fixes from PR #147 are unchanged.
1 participant
What
The "Get early access" CTA added in #32 was being buried below the first mobile viewport on the Promptly and Drishti hero pages. On 320–414px phones the hero H1 rendered at
7vwwith a9chcap, making the heading ~540px tall (over half a 844px viewport) and pushing the CTA to ~1035–1191px — below the fold, under the long lead paragraph.Fix
public/styles.css: scale.page-hero-card h1down on mobile (clamp(2.1rem, 5.6vw, 3.4rem), no ch cap). The desktop3.4remfloor is preserved; only the mobile media query changes. Homepage is untouched.public/promptly/index.html,public/drishti/index.html: move the hero.action-rowabove the.page-lead, so the CTA is the first thing after the heading on narrow screens. Desktop two-column layout is unaffected.scripts/test-public-heading-hierarchy.mjs: extend the existing 320/390px Playwright layout probe to assert the early-access CTA is fully within the first viewport on both pages (fails closed when Playwright is missing).Verification (Playwright, 390×844 mobile)
Before: CTA bottom at 1083px (Promptly) / 1164px (Drishti) — below fold.
After: CTA fully in-fold on all mobile widths (320/360/390/414) and even at 667px viewport height; buttons, lead, and chips all visible in the first viewport.
test-public-heading-hierarchy.mjs: 93 checks, 0 failures (incl. new CTA viewport assertions)check-retention-automationfailure is a pre-existing environmental stale-checkout comparison, unrelated)node --checkpasses on all scriptsCloses the lane-1 packet item: "Promptly and Drishti mobile heroes bury the newly added Get early access CTA below the first [viewport]"
Summary by CodeRabbit
Bug Fixes
Tests