Landing: fix mobile hero — fixed-height demo + soft dot-grid/wash#280
Merged
SawyerHood merged 2 commits intoJun 20, 2026
Merged
Conversation
On mobile the mock app card grew taller as the running thread streamed rows in, pushing the page down instead of clipping inside the frame. The ≤720px media query switched .mock-body to height:auto and .feed to overflow:visible/min-height:200px, dropping the bounded-and-clipping behavior the desktop layout relies on. Because the body is a column flex here, .main also needs min-height:0 so it stays within the fixed body instead of growing with the feed's content. Now the card stays a fixed height and the feed clips, anchoring the newest rows to the bottom (.feed-live) — matching desktop. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…ngles The hero's dot-grid (.hero::after mask) and neutral wash (.hero::before background) are both sized in fixed px (540/640px radial) for the wide desktop hero. On the narrow mobile hero those radials can't fade within the box, so each renders as a full-width rectangle with hard side edges and corners instead of a soft, fading patch. On mobile (≤720px) re-size both with relative (%) radials narrower than the hero so they fade out on all sides as ambient texture. Include the -webkit- mask prefix for iOS Safari. Desktop is unchanged. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
SawyerHood
deleted the
bb/fix-mobile-landing-demo-height-growth-thr_5cgumeb9sx
branch
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.
Summary
Fixes three mobile-only issues on the landing page hero, all reported from a phone:
Demo card grew without bound. The mock BB app ("Triage the Sentry spike") streams rows in endlessly, and on mobile the card kept growing taller as messages arrived, pushing the page down. The ≤720px media query had dropped the desktop's bounded-and-clipping behavior (
.mock-body→height:auto,.feed→overflow:visible). Restored a fixed height and addedmin-height:0to.main(needed because mobile stacks the body as a column flex) so the feed clips and anchors newest rows to the bottom, matching desktop.Dot-grid bunched into a hard band.
.hero::after's mask is a fixed-px (540px) radial tuned for the wide desktop hero; on the narrow mobile hero it couldn't fade within the box, leaving a full-width band of dots with a hard edge near the headline. Re-sized with a relative%ellipse so it fades on all sides as ambient texture.Neutral wash had hard corners.
.hero::before's background wash had the same fixed-px (640px) problem — a faint gray rectangle with hard side edges/corners behind the nav. Re-sized relative to the hero so it fades on all sides too.All changes are scoped to
@media (max-width: 720px); desktop is unchanged. The mask override includes the-webkit-prefix for iOS Safari.Files changed
apps/landing/src/styles.cssTesting
pnpm exec turbo run typecheck build --filter=@bb/landing✓pnpm --filter @bb/landing lint✓Risks
Low — CSS-only, mobile-scoped. No behavior/logic changes.