fix(web): tokenize mounted homepage hero chrome#10127
Conversation
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
Your free trial has ended. If you'd like to continue receiving code reviews, you can add a payment method here.
📝 WalkthroughWalkthroughThis PR implements System B mounted homepage hero styling by adding CSS primitives using design-system tokens, applying corresponding class names to the hero markup, and enforcing a source/CSS contract test to prevent styling leakage and maintain the design pattern integrity. ChangesSystem B Mounted Homepage Hero
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Possibly related issues
Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@apps/web/app/`(home)/home.css:
- Around line 4791-4794: The CSS uses experimental features that need fallbacks:
wrap the min-height: 100svh declaration in a feature guard and add a 100vh
fallback for .system-b-mounted-home-hero-shell (use `@supports` (height: 100svh)
to apply the svh rule and leave a plain min-height: 100vh as the default), and
likewise guard each color-mix(in oklab, ...) usage (the color declarations
around ~4803, ~4863-4867) with `@supports` (color-mix(in oklab, white 0%)) or
similar and provide a non-color-mix fallback color (or a precomputed hex/oklch
value) as the base; update or keep the existing selectors (e.g.,
.system-b-mounted-home-hero-shell and the specific color rules) so older
browsers get the fallback values while modern browsers get the experimental
features.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
Run ID: 5c8c9694-7e84-4f8c-b0d2-ddfb6f45e359
📒 Files selected for processing (3)
apps/web/app/(home)/home.cssapps/web/app/(home)/page.tsxapps/web/tests/unit/home/mounted-home-hero-system-b-style-guard.test.ts
|
✅ All tests passed. |
CI SummaryA crisp snapshot of this PR run — executed vs. skipped, with timing for every key lane. Risk: medium (smoke: false, preview: true, blocks unattended auto-merge: false)
Run: 27019207062 |
There was a problem hiding this comment.
Your free trial has ended. If you'd like to continue receiving code reviews, you can add a payment method here.
|
|
Branch: 'codex/jov-2808-mounted-homepage-hero-shell-system-b' To resolve:
This comment will not repeat for 2 hours. |
itstimwhite
deleted the
codex/jov-2808-mounted-homepage-hero-shell-system-b
branch
1 participant
Summary
system-b-mounted-home-hero-*primitives.home.cssSystem B contract for the active hero shell, copy, CTA, and first-viewport chrome.100vhand token fallbacks behind@supportsguards for100svhandcolor-mix(...)refinements.Verification Results
pnpm --filter @jovie/web exec vitest run tests/unit/home/mounted-home-hero-system-b-style-guard.test.ts— passed.pnpm biome check --write 'apps/web/app/(home)/page.tsx' 'apps/web/app/(home)/home.css' apps/web/tests/unit/home/mounted-home-hero-system-b-style-guard.test.ts— passed.pnpm --filter @jovie/web run typecheck -- --pretty false— passed.git diff --check— passed.Screenshot Evidence
/Users/timwhite/.codex/worktrees/7060/jov-2808-home-hero-surface-cluster-system-b/.gstack/design-reports/screenshots/jov-2808-homepage-hero-desktop-reviewfix.png/Users/timwhite/.codex/worktrees/7060/jov-2808-home-hero-surface-cluster-system-b/.gstack/design-reports/screenshots/jov-2808-homepage-hero-mobile-reviewfix.pngBrowser metrics: desktop
scrollWidth=1440,bodyWidth=1440, shellmin-height=1100px; mobilescrollWidth=390,bodyWidth=390, shellmin-height=844px; headline letter spacing resolves tonormal; beam and grid display resolve tonone.Layout Stability
States checked: desktop hero, mobile hero, optional secondary CTA present, product rail present. The shell uses a
100vhfallback with100svhguarded by@supports, CTA controls keep a fixed tokenized min-height, and the product rail remains in its existing reserved command-center slot.Linear: JOV-2808