Skip to content

fix(public): keep app-page early-access CTA above the fold on phones - #54

Closed
nish3451 wants to merge 4 commits into
mainfrom
fix/lane1-app-hero-mobile-cta-fold
Closed

fix(public): keep app-page early-access CTA above the fold on phones#54
nish3451 wants to merge 4 commits into
mainfrom
fix/lane1-app-hero-mobile-cta-fold

Conversation

@nish3451

Copy link
Copy Markdown
Collaborator

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: 9ch at 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:

Page Viewport Before (CTA bottom) After (CTA bottom) Fold
Promptly 390x844 1013 611 844
Drishti 390x844 1094 638 844
Promptly 375x667 1040 638 667
Drishti 375x667 1094 638 667
Promptly 430x932 - 611 932
Drishti 430x932 - 611 932
  • 768/900px tablet and 1440px desktop CTA positions unchanged (805/865/1130 before vs after).
  • No horizontal overflow at any tested width (320-1440).
  • npm run ci green: 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.

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).

@greptile-apps greptile-apps Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nish3451 has reached the 50-credit limit for trial accounts. To continue receiving code reviews, upgrade your plan.

@coderabbitai

coderabbitai Bot commented Aug 10, 2026

Copy link
Copy Markdown

Warning

Review limit reached

@nish3451, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 37 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

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 configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 45e15a7b-41c6-403f-99bc-131adbc2c372

📥 Commits

Reviewing files that changed from the base of the PR and between 45ef63b and 2879661.

📒 Files selected for processing (1)
  • public/styles.css

Comment @coderabbitai help to get the list of available commands.

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 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".

Comment thread public/styles.css
Comment on lines +900 to +902
.page-hero-card h1 {
max-width: none;
font-size: clamp(1.9rem, 6vw, 3rem);

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge 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 👍 / 👎.

@chatgpt-codex-connector

Copy link
Copy Markdown

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.
To continue using code reviews, add credits to your account and enable them for code reviews in your settings.

@greptile-apps greptile-apps Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nish3451 has reached the 50-credit limit for trial accounts. To continue receiving code reviews, upgrade your plan.

nish3451 added a commit that referenced this pull request Aug 11, 2026
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.

@greptile-apps greptile-apps Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nish3451 has reached the 50-credit limit for trial accounts. To continue receiving code reviews, upgrade your plan.

@greptile-apps greptile-apps Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nish3451 has reached the 50-credit limit for trial accounts. To continue receiving code reviews, upgrade your plan.

@nish3451

Copy link
Copy Markdown
Collaborator Author

Superseded by #96 (identical diff to #43). #96 scopes the fix to the product heroes rather than changing global .page-hero-card padding and type scale. Closing in favour of #96.

@nish3451 nish3451 closed this Aug 19, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant