From 688afa2546c232f36f37f1bca111bead10444e39 Mon Sep 17 00:00:00 2001
From: lashman <lashman@robotbrush.com>
Date: Sat, 11 Apr 2026 22:59:04 +0300
Subject: [PATCH] discover page layout fixes: full-width hero, no scrollbar,
 taller tiles, no collapse on tab switch, unclipped glow

---
 src/components/discover/BrowseGrid.tsx  | 4 ++--
 src/components/discover/DecadeStrip.tsx | 2 +-
 src/components/discover/MoodChips.tsx   | 2 +-
 src/components/discover/TonightHero.tsx | 4 ++--
 src/pages/DiscoverPage.tsx              | 2 +-
 5 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/discover/BrowseGrid.tsx b/src/components/discover/BrowseGrid.tsx
index 249f00a..a6eb4e5 100644
--- a/src/components/discover/BrowseGrid.tsx
+++ b/src/components/discover/BrowseGrid.tsx
@@ -146,7 +146,7 @@ function Tile({
       whileTap={{ scale: 0.98 }}
       transition={{ duration: 0.18, ease: [0.16, 1, 0.3, 1] }}
       aria-pressed={active}
-      className={`group relative w-full aspect-[7/4] rounded-xl overflow-hidden border text-left focus-ring transition-colors ${
+      className={`group relative w-full min-h-[136px] rounded-xl border text-left focus-ring transition-colors ${
         active ? 'border-accent/55' : 'border-border hover:border-border-strong'
       }`}
       style={{ background: tileBackground(v.hue) }}
@@ -166,7 +166,7 @@ function Tile({
         <p className="font-display text-[15px] font-bold tracking-tight text-text-1 leading-tight pr-8">
           {tile.label}
         </p>
-        <p className="text-[10.5px] text-text-3 mt-0.5 pr-8 line-clamp-1">
+        <p className="text-[10.5px] text-text-3 mt-1 pr-8 leading-snug">
           {tile.subtitle}
         </p>
       </div>
diff --git a/src/components/discover/DecadeStrip.tsx b/src/components/discover/DecadeStrip.tsx
index 1886f2d..787d763 100644
--- a/src/components/discover/DecadeStrip.tsx
+++ b/src/components/discover/DecadeStrip.tsx
@@ -62,7 +62,7 @@ export default function DecadeStrip({ kind, active, onChange }: Props) {
           ))}
         </ul>
       </div>
-      <AnimatePresence mode="wait">
+      <AnimatePresence>
         {active && (
           <motion.div
             key={active + kind}
diff --git a/src/components/discover/MoodChips.tsx b/src/components/discover/MoodChips.tsx
index 2d813a8..fad0b33 100644
--- a/src/components/discover/MoodChips.tsx
+++ b/src/components/discover/MoodChips.tsx
@@ -91,7 +91,7 @@ export function MoodRow({ moodId, kind }: { moodId: string; kind: 'movie' | 'tv'
   const mood = DISCOVER_MOODS.find(m => m.id === moodId)
   if (!mood) return null
   return (
-    <AnimatePresence mode="wait">
+    <AnimatePresence>
       <motion.div
         key={moodId + ':' + kind}
         initial={{ opacity: 0, y: 8 }}
diff --git a/src/components/discover/TonightHero.tsx b/src/components/discover/TonightHero.tsx
index a18bb45..85baa9e 100644
--- a/src/components/discover/TonightHero.tsx
+++ b/src/components/discover/TonightHero.tsx
@@ -105,7 +105,7 @@ export default function TonightHero({ kind }: Props) {
       initial={{ opacity: 0, y: 12 }}
       animate={{ opacity: 1, y: 0 }}
       transition={{ duration: 0.55, ease: [0.16, 1, 0.3, 1] }}
-      className="mx-7 mb-9 relative rounded-2xl overflow-hidden ring-1 ring-border bg-elevated/40 shadow-[0_24px_48px_-16px_rgba(0,0,0,0.65)]"
+      className="mb-9 relative rounded-2xl overflow-hidden ring-1 ring-border bg-elevated/40 shadow-[0_24px_48px_-16px_rgba(0,0,0,0.65)]"
       style={{ aspectRatio: '21/9', maxHeight: '440px' }}
     >
       <motion.img
@@ -126,7 +126,7 @@ export default function TonightHero({ kind }: Props) {
         className="absolute inset-0 z-10 group cursor-pointer focus-ring rounded-2xl"
         aria-label={`Open ${title}`}
       >
-        <div className="absolute left-0 right-0 bottom-0 p-7 md:p-9 max-w-2xl text-left">
+        <div className="absolute left-0 right-0 bottom-0 p-7 md:p-9 text-left">
           <div className="flex items-center gap-2 mb-2.5">
             <MoonStars size={12} className="text-accent" />
             <span className="text-[10.5px] uppercase tracking-[0.2em] font-semibold text-accent">
diff --git a/src/pages/DiscoverPage.tsx b/src/pages/DiscoverPage.tsx
index 430fb91..1ba50bb 100644
--- a/src/pages/DiscoverPage.tsx
+++ b/src/pages/DiscoverPage.tsx
@@ -82,7 +82,7 @@ export default function DiscoverPage() {
   }
 
   return (
-    <div className="pb-12" style={{ isolation: 'isolate' }}>
+    <div className="pb-12 overflow-x-hidden" style={{ isolation: 'isolate' }}>
       <Hero />
 
       <div