diff --git a/app/globals.css b/app/globals.css index 13f7a9d6..7f42c674 100644 --- a/app/globals.css +++ b/app/globals.css @@ -106,6 +106,15 @@ --mobile-generate-bar-pad: calc( var(--mobile-generate-bar-h) + var(--mobile-nav-clearance) + 0.5rem ); + /* + * Toast stack clears MobileGenerateBar + tab nav (AIT-597 / AIT-447 residual). + * MobileGenerateBar parks at --mobile-nav-clearance (pill row ~3.25rem). + * Without bar-h, toast lands in the same band as the Generate pills on browse + * surfaces (library/explore/pricing/…). Desktop keeps lg:bottom-6 in Toast.tsx. + */ + --toast-clearance: calc( + var(--mobile-nav-clearance) + var(--mobile-generate-bar-h) + 0.5rem + ); /* shadcn-compatible aliases */ --background: var(--bg); diff --git a/components/Toast.tsx b/components/Toast.tsx index c76416b6..3ded7f1f 100644 --- a/components/Toast.tsx +++ b/components/Toast.tsx @@ -28,10 +28,13 @@ export function ToastProvider({ children }: { children: React.ReactNode }) { return ( {children} - {/* Clear tab nav + home indicator on mobile; desktop keeps a simple inset. */} + {/* + Mobile: --toast-clearance stacks MobileGenerateBar + tab nav + gap + (AIT-597 / AIT-447 residual). Desktop keeps a simple inset (lg:bottom-6). + */}
{items.map((t) => (