+
@@ -107,10 +130,13 @@ export function ModeHomeMain({
data-testid={testId}
className={cn(
// Phone: content is vertically centred (not bottom-anchored) so the page
- // no longer collapses all its slack into a void above the hero. Bottom
- // padding still reserves room for the fixed mobile composer. From sm up
- // the composer moves into the hero, so the reserved space drops away.
- "grid min-h-[calc(100dvh-4rem)] items-center justify-items-center bg-[color:var(--background)] px-4 pb-[calc(9rem+env(safe-area-inset-bottom))] pt-[clamp(1.25rem,4vh,2.25rem)] text-[color:var(--text)] sm:px-6 sm:pb-[clamp(1.75rem,5vh,3.25rem)] sm:pt-[clamp(1.75rem,5vh,3.25rem)] lg:px-8",
+ // no longer collapses all its slack into a void above the hero. The
+ // standalone shell (#main-content) already reserves 9rem of bottom
+ // padding for the fixed mobile composer, so this main only subtracts
+ // that space from its min-height instead of re-adding the padding —
+ // otherwise short homes scroll by exactly the duplicated reservation.
+ // From sm up the composer moves into the hero, so the reserve drops away.
+ "grid min-h-[calc(100dvh-13.75rem-env(safe-area-inset-bottom))] items-center justify-items-center bg-[color:var(--background)] px-4 pb-4 pt-[clamp(1.25rem,4vh,2.25rem)] text-[color:var(--text)] sm:min-h-[calc(100dvh-4rem)] sm:px-6 sm:pb-[clamp(1.75rem,5vh,3.25rem)] sm:pt-[clamp(1.75rem,5vh,3.25rem)] lg:px-8",
className,
)}
>
@@ -133,7 +159,7 @@ export function ModeHomeVerificationFooter({
totalCount?: number;
}) {
return (
-
+
{label}
@@ -202,11 +228,11 @@ export function ModeHomeTemplate({
-
+
{desktopComposerSlotId ? (
@@ -228,7 +254,7 @@ export function ModeHomeTemplate({
{action.title}
-
+
{action.description}
@@ -239,7 +265,7 @@ export function ModeHomeTemplate({
>
);
const actionClassName = cn(
- "mode-home-action group grid min-h-[4.8rem] w-full grid-cols-[2.5rem_minmax(0,1fr)_1.25rem] items-center gap-3 bg-[color:var(--surface)] px-4 py-3 text-left transition hover:bg-[color:var(--surface-subtle)] focus-visible:relative focus-visible:z-10 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-[color:var(--focus)] disabled:cursor-wait disabled:opacity-60 lg:min-h-[8.4rem] lg:grid-cols-[3.5rem_minmax(0,1fr)_1.5rem] lg:gap-4 lg:rounded-lg lg:border lg:border-[color:var(--border)] lg:px-6 lg:py-5 lg:shadow-[var(--shadow-card)]",
+ "mode-home-action group grid min-h-[4rem] w-full grid-cols-[2.5rem_minmax(0,1fr)_1.25rem] items-center gap-3 bg-[color:var(--surface)] px-4 py-2.5 text-left transition sm:min-h-[4.8rem] sm:py-3 hover:bg-[color:var(--surface-subtle)] focus-visible:relative focus-visible:z-10 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-[color:var(--focus)] disabled:cursor-wait disabled:opacity-60 lg:min-h-[8.4rem] lg:grid-cols-[3.5rem_minmax(0,1fr)_1.5rem] lg:gap-4 lg:rounded-lg lg:border lg:border-[color:var(--border)] lg:px-6 lg:py-5 lg:shadow-[var(--shadow-card)]",
index > 0 && "border-t border-[color:var(--border)] lg:border-t-[color:var(--border)]",
);
@@ -268,7 +294,7 @@ export function ModeHomeTemplate({
) : null}
{pills?.length ? (
-
+
{pillsTitle || pillsAction ? (