fix(landing): keep the hero CTA inside the first fold on laptop viewports - #2732
Open
0xkkonrad wants to merge 2 commits into
Open
fix(landing): keep the hero CTA inside the first fold on laptop viewports#27320xkkonrad wants to merge 2 commits into
0xkkonrad wants to merge 2 commits into
Conversation
…orts The hero artwork was sized purely by viewport width (50vw, no height cap), and the stack under it (mt-18 + tagline + mt-12 + button) is 344px of fixed height. On 16:9/16:10 laptops the SIGN UP button ends up at or below the fold: 1366x657 and 1280x689 -> below fold, 1440x789 (MacBook Air 13") -> clipped, 1536x753 -> below fold. Even 1920x969 fits with 2px to spare. Cap the artwork at 100svh minus the fixed stack (+3rem slack) and tighten the two desktop gaps (h2 mt-18 -> md:mt-12, CTA md:mt-12 -> mt-8). The button is now inside the fold at every measured viewport; tall screens are near-unchanged. Reported by Slava (Discord), Notion TASK-21626.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Plus Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Contributor
Code-analysis diffPainscore total: 7167.28 → 7167.52 (+0.24) 🆕 New findings (6)
✅ Resolved (6)
|
Contributor
🧪 UI test report — ✅ all greenSuites
📊 Coverage (unit)
⏱ 10 slowest test cases
|
With the artwork now capped by viewport height, a 40vh mascot on a 1366x657 laptop was almost as tall as the artwork and hid "LOCAL FEEL". Cap it at 100svh-28rem too (md+ only) so it keeps the ~0.7x artwork proportion of the 1440x789 layout; viewports >= 789px tall are unchanged.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Slava flagged on Discord that the homepage shows no CTA without scrolling on his MacBook (Notion TASK-21626). Measured on prod today — it's not one machine, it's every common laptop:
Why
hero.tsx: the headline artwork ismd:w-[50%]with no height cap, so its height tracks viewport width (412px at 1280w → 623px at 1920w), while the stack under it (mt-18+ h2 + tagline +md:mt-12+ 66px button) is 344px of fixed height. Nothing in the fold responds to viewport height.Change (4 classes)
+ max-h-[calc(100svh-23rem)]— 23rem = fixed stack below it + 3rem slackmt-18→mt-18 md:mt-12mt-8 md:mt-12→mt-8+ md:max-h-[min(40vh,calc(100svh-28rem))]— keeps the peanut ~0.7× the artwork on short laptops so "LOCAL FEEL" stays legible; ≥789px-tall viewports unchanged. Note for feat(mascot): move the mascot to Lottie and drop 6 MB of rasters #2728: that PR replaces this<Image>with ah-[40vh]host div — carry the cap over asmd:h-[min(40vh,calc(100svh-28rem))]on the host when resolving the conflict.Result: CTA bottom lands ~64px above the fold at every desktop viewport ≥ ~600px tall; tall screens barely change (FHD artwork 623 → 601px). Mobile only changes on SE-class heights (cap doesn't bite at 664+). Mascot (
max-h-[40vh], anchored to the h2 by JS) and stars untouched — deliberately stays clear of #2728's mascot rewrite.Verify
Vercel preview at 1366×657, 1280×689, 1440×789, 1536×753, 1920×969, 390×664, 375×553 — SIGN UP fully visible without scrolling on all; compare against peanut.me at the same sizes.