From d4c1ae44b4ae34497b9053e39a98e306818037e0 Mon Sep 17 00:00:00 2001
From: lashman <lashman@robotbrush.com>
Date: Mon, 13 Apr 2026 20:23:45 +0300
Subject: [PATCH] discover page fixes: hero fills full width with mx-7 margins,
 chip glow unclipped, no section collapse on tab switch

---
 src/components/discover/DecadeStrip.tsx | 4 ++--
 src/components/discover/MoodChips.tsx   | 3 ++-
 src/components/discover/TonightHero.tsx | 5 ++---
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/discover/DecadeStrip.tsx b/src/components/discover/DecadeStrip.tsx
index 787d763..7c14d76 100644
--- a/src/components/discover/DecadeStrip.tsx
+++ b/src/components/discover/DecadeStrip.tsx
@@ -50,7 +50,7 @@ export default function DecadeStrip({ kind, active, onChange }: Props) {
           By decade
         </span>
       </div>
-      <div className="-mx-7 px-7 overflow-x-auto hide-scrollbar">
+      <div className="-mx-7 px-7 pb-3 overflow-x-auto hide-scrollbar">
         <ul className="flex items-stretch gap-2 min-w-max">
           {DECADES.map(d => (
             <DecadeChip
@@ -70,7 +70,7 @@ export default function DecadeStrip({ kind, active, onChange }: Props) {
             animate={{ opacity: 1, y: 0 }}
             exit={{ opacity: 0, y: -4 }}
             transition={{ duration: 0.28, ease: [0.16, 1, 0.3, 1] }}
-            className="-mx-7 mt-4"
+            className="-mx-7 mt-4 min-h-[220px]"
           >
             <DecadeRow
               decade={DECADES.find(d => d.label === active)!}
diff --git a/src/components/discover/MoodChips.tsx b/src/components/discover/MoodChips.tsx
index fad0b33..887beec 100644
--- a/src/components/discover/MoodChips.tsx
+++ b/src/components/discover/MoodChips.tsx
@@ -23,7 +23,7 @@ export function MoodChips({ activeId, onChange, kind }: Props) {
           In the mood for
         </span>
       </div>
-      <div className="relative -mx-7 px-7 overflow-x-auto hide-scrollbar">
+      <div className="relative -mx-7 px-7 pb-3 overflow-x-auto hide-scrollbar">
         <ul className="flex items-center gap-2 pb-1 min-w-max">
           {DISCOVER_MOODS.map(mood => {
             const available = kind === 'movie' ? !!mood.movieParams : !!mood.tvParams
@@ -98,6 +98,7 @@ export function MoodRow({ moodId, kind }: { moodId: string; kind: 'movie' | 'tv'
         animate={{ opacity: 1, y: 0 }}
         exit={{ opacity: 0, y: -6 }}
         transition={{ duration: 0.28, ease: [0.16, 1, 0.3, 1] }}
+        className="min-h-[200px]"
       >
         {kind === 'movie' && <MoodMovieRow mood={mood} />}
         {kind === 'tv' && mood.tvParams && <MoodTvRow mood={mood} />}
diff --git a/src/components/discover/TonightHero.tsx b/src/components/discover/TonightHero.tsx
index 85baa9e..705c74b 100644
--- a/src/components/discover/TonightHero.tsx
+++ b/src/components/discover/TonightHero.tsx
@@ -105,8 +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="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' }}
+      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)] h-[200px] sm:h-[240px] md:h-[300px] lg:h-[380px] xl:h-[440px]"
     >
       <motion.img
         key={p.id}
@@ -126,7 +125,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 text-left">
+        <div className="absolute left-0 right-0 bottom-0 p-7 md:p-9 text-left max-w-3xl">
           <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">