Skip to content

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

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

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

Conversation

@nish3451

@nish3451 nish3451 commented Aug 9, 2026

Copy link
Copy Markdown
Collaborator

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

Page Viewport Before (CTA bottom) After (CTA bottom)
Promptly 390×844 1028 626
Drishti 390×844 1110 653
Promptly 375×667 1055 653
Drishti 375×667 1110 653

Desktop (1440px) and tablet (900px) rendering unchanged; no horizontal overflow; npm test green (all suites pass).

Summary by CodeRabbit

  • Style
    • Improved the hero card layout on smaller screens with more compact spacing.
    • Adjusted heading and paragraph sizing for better readability on mobile devices.
    • Reduced spacing around action controls to create a more streamlined mobile experience.

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>

@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 9, 2026

Copy link
Copy Markdown

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 04b678e7-f544-478e-b734-cb914b02bca8

📥 Commits

Reviewing files that changed from the base of the PR and between a0d1de5 and 65bd3c2.

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

📝 Walkthrough

Walkthrough

The mobile .page-hero-card layout now uses reduced vertical spacing, responsive heading sizing, and smaller margins for the lead paragraph and action row on screens up to 720px wide.

Changes

Mobile hero card layout

Layer / File(s) Summary
Compact hero layout
public/styles.css
The mobile hero card uses reduced padding. The heading has responsive sizing without a max-width cap. The lead paragraph and action row use smaller top margins.

Estimated code review effort: 1 (Trivial) | ~2 minutes

Possibly related PRs

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title clearly describes the main change: keeping the app-page early-access CTA above the fold on phones.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
✨ Finishing Touches 💡 1
🛠️ Fix failing CI checks 💡
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch fix/public-app-hero-mobile-cta-fold

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

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

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

@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: 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".

Comment thread public/styles.css
bury the action row below the fold on phones. */
.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 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 👍 / 👎.

@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.
@nish3451

Copy link
Copy Markdown
Collaborator Author

Superseded by #96, which fixes the same above-the-fold CTA problem with a targeted product-hero class on the Promptly/Drishti heroes instead of restyling every .page-hero-card globally. Closing in favour of #96.

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