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 }}
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>
+1 -1
View File
@@ -62,7 +62,7 @@ export default function DecadeStrip({ kind, active, onChange }: Props) {
))}
</ul>
</div>
<AnimatePresence mode="wait">
<AnimatePresence>
{active && (
<motion.div
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)
if (!mood) return null
return (
<AnimatePresence mode="wait">
<AnimatePresence>
<motion.div
key={moodId + ':' + kind}
initial={{ opacity: 0, y: 8 }}
+2 -2
View File
@@ -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">
+1 -1
View File
@@ -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