discover page layout fixes: full-width hero, no scrollbar, taller tiles, no collapse on tab switch, unclipped glow

This commit is contained in:
2026-04-11 22:59:04 +03:00
parent c60db65bce
commit 688afa2546
5 changed files with 7 additions and 7 deletions
+2 -2
View File
@@ -146,7 +146,7 @@ function Tile({
whileTap={{ scale: 0.98 }} whileTap={{ scale: 0.98 }}
transition={{ duration: 0.18, ease: [0.16, 1, 0.3, 1] }} transition={{ duration: 0.18, ease: [0.16, 1, 0.3, 1] }}
aria-pressed={active} 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' active ? 'border-accent/55' : 'border-border hover:border-border-strong'
}`} }`}
style={{ background: tileBackground(v.hue) }} 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"> <p className="font-display text-[15px] font-bold tracking-tight text-text-1 leading-tight pr-8">
{tile.label} {tile.label}
</p> </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} {tile.subtitle}
</p> </p>
</div> </div>
+1 -1
View File
@@ -62,7 +62,7 @@ export default function DecadeStrip({ kind, active, onChange }: Props) {
))} ))}
</ul> </ul>
</div> </div>
<AnimatePresence mode="wait"> <AnimatePresence>
{active && ( {active && (
<motion.div <motion.div
key={active + kind} key={active + kind}
+1 -1
View File
@@ -91,7 +91,7 @@ export function MoodRow({ moodId, kind }: { moodId: string; kind: 'movie' | 'tv'
const mood = DISCOVER_MOODS.find(m => m.id === moodId) const mood = DISCOVER_MOODS.find(m => m.id === moodId)
if (!mood) return null if (!mood) return null
return ( return (
<AnimatePresence mode="wait"> <AnimatePresence>
<motion.div <motion.div
key={moodId + ':' + kind} key={moodId + ':' + kind}
initial={{ opacity: 0, y: 8 }} initial={{ opacity: 0, y: 8 }}
+2 -2
View File
@@ -105,7 +105,7 @@ export default function TonightHero({ kind }: Props) {
initial={{ opacity: 0, y: 12 }} initial={{ opacity: 0, y: 12 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.55, ease: [0.16, 1, 0.3, 1] }} 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' }} style={{ aspectRatio: '21/9', maxHeight: '440px' }}
> >
<motion.img <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" className="absolute inset-0 z-10 group cursor-pointer focus-ring rounded-2xl"
aria-label={`Open ${title}`} 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"> <div className="flex items-center gap-2 mb-2.5">
<MoonStars size={12} className="text-accent" /> <MoonStars size={12} className="text-accent" />
<span className="text-[10.5px] uppercase tracking-[0.2em] font-semibold text-accent"> <span className="text-[10.5px] uppercase tracking-[0.2em] font-semibold text-accent">
+1 -1
View File
@@ -82,7 +82,7 @@ export default function DiscoverPage() {
} }
return ( return (
<div className="pb-12" style={{ isolation: 'isolate' }}> <div className="pb-12 overflow-x-hidden" style={{ isolation: 'isolate' }}>
<Hero /> <Hero />
<div <div