Skip to content

fix(web): re-centre minimized hero pill #218

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
JustAGhosT merged 1 commit into from
Jun 23, 2026
Merged

fix(web): re-centre minimized hero pill #218

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 24 additions & 14 deletions apps/web/src/features/hero/components/Hero/hero.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -206,6 +206,13 @@
/* 1px marker at the top of the hero; the scroll-to-explore hint is shown only
while this is in the viewport (i.e. the page is at the very top). */
.scrollSentinel {
/* Out of flow: the hero section is a flex row, so an in-flow sentinel would
claim half the row and shove the hero content off-centre to the right.
Absolute-pinned at the section top, it still drives the scroll-hint
IntersectionObserver without affecting layout. */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1px;
pointer-events: none;
Expand Down Expand Up @@ -343,20 +350,29 @@
}

.minimized {
padding: 0.75rem 1rem;
/* Wide enough for the full title on one line on desktop; caps at 92vw on
narrow screens where the title wraps instead of clipping. */
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
/* Hug the icon + title as a compact chip instead of stretching to a fixed
width (which stranded the corner-pinned toggle far from the centered
title). The parent flex keeps the chip centred on screen. Still caps at
92vw on narrow screens so a long title wraps rather than overflowing. */
width: fit-content;
max-width: min(92vw, 520px);
padding: 0.75rem 1rem;
}

/* In the minimized chip the toggle flows inline right before the title rather
than pinning to the card's top-left corner. */
.minimized .minimizeButton {
position: static;
flex-shrink: 0;
}

.minimizedContent {
display: flex;
align-items: center;
justify-content: center;
/* Add left margin to account for minimize button (28px + 0.75rem gap) */
margin-left: calc(28px + 0.5rem);
/* Balance with equal right margin for symmetric centering */
margin-right: calc(28px + 0.5rem);
}

.minimizedTitle {
Expand All @@ -382,12 +398,6 @@
padding: 0.5rem 0.75rem;
}

.minimizedContent {
/* Smaller margin on mobile to account for smaller button (24px) */
margin-left: calc(24px + 0.5rem);
margin-right: calc(24px + 0.5rem);
}

.minimizedTitle {
font-size: 1rem;
}
Expand Down
Loading