fix(web): re-centre minimized hero pill

[JustAGhosT]

What

Fixes the misaligned hero on the home page (the minimized "Shaping Tomorrow's Technology" pill).

1. Re-centre the hero (primary fix)

The scroll-hint sentinel — a 1px element added for the scroll-to-explore IntersectionObserver — was an in-flow child of the display:flex hero section. A flex row split the width between the sentinel and the hero content, so the content was shoved into the right half of the section (the title floated up-and-right instead of centred).

Pinning the sentinel with position:absolute; top:0 takes it out of layout flow. It still enters/leaves the viewport at the top of the page so the scroll hint toggles exactly as before — but the hero content now centres on the section again.

Measured (1600px viewport, sidebar 220px → section centre = 910px):

	hero pill centre	scroll-button centre
before	1255px (right half)	910px
after	910px ✅	910px

2. Compact minimized chip (secondary polish — separable)

The minimized pill stretched to a fixed 520px with the expand toggle pinned to the top-left corner and the title centred via balancing margins, which left a wide empty gap between the icon and the text. It's now a compact, self-hugging chip (width: fit-content, flex row, toggle inline before the title). If you preferred the original corner-toggle style, this is an isolated hunk and trivial to drop — the centring fix above stands on its own.

Verification

• vite build green; root eslint clean.
• Headless screenshot before/after (minimized hero loads by default) confirms the pill centres at the section midpoint and reads as a tidy chip.
• Maximized hero state untouched (the .minimized rules only apply with that class).

CSS-only; one file (hero.module.css).

🤖 Generated with Claude Code

Summary by CodeRabbit

• Style
  • Refined the minimized hero section layout with improved content width and button positioning.
  • Enhanced mobile responsiveness with adjusted spacing and text sizing on smaller screens.
  • Optimized scroll indicator positioning for better visual alignment.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 6c617a2a-0665-446d-b427-1162af2543ac

📥 Commits

Reviewing files that changed from the base of the PR and between 1a2bb4a and 8a82d6a.

📒 Files selected for processing (1)

• apps/web/src/features/hero/components/Hero/hero.module.css

---

📝 Walkthrough

Walkthrough

A single CSS file (hero.module.css) is updated: .scrollSentinel is changed to position: absolute pinned at the origin to remove it from normal flow, and the minimized hero "chip" layout is rewritten to use fit-content width with a max-width cap, removing margin-offset hacks and making the minimize button flow inline.

Changes

Hero CSS Layout Fixes

Layer / File(s)	Summary
.scrollSentinel absolute positioning apps/web/src/features/hero/components/Hero/hero.module.css	.scrollSentinel is set to position: absolute at top: 0; left: 0, taking it out of document flow while preserving its role as an IntersectionObserver scroll-hint target.
Minimized chip layout and inline button apps/web/src/features/hero/components/Hero/hero.module.css	.minimizedContent is rewritten with width: fit-content and max-width: min(92vw, 520px), removing the previous left/right margin offsets. .minimized .minimizeButton is changed to position: static so it participates inline in the flex row. The mobile media query retains the reduced font-size for .minimizedTitle.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~5 minutes

Possibly related PRs

• phoenixvc/phoenix-website#214: The .scrollSentinel positioning change directly supports the IntersectionObserver-based scroll-hint sentinel implementation introduced in that PR.

Poem

🐇 A sentinel floats, out of the flow's way,
No layout to shift, no margin to sway.
The chip finds its width, fit-content and neat,
The button flows inline — a tidy feat!
Hop, hop, the hero looks perfectly sweet. 🌟

🚥 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 PR title 'fix(web): re-centre minimized hero pill' directly matches the primary objective of fixing the centering/alignment of the minimized hero element on the home page.
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.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/hero-minimized-alignment

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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