discover page layout fixes: full-width hero, no scrollbar, taller tiles, no collapse on tab switch, unclipped glow
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -62,7 +62,7 @@ export default function DecadeStrip({ kind, active, onChange }: Props) {
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
<AnimatePresence mode="wait">
|
||||
<AnimatePresence>
|
||||
{active && (
|
||||
<motion.div
|
||||
key={active + kind}
|
||||
|
||||
@@ -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 }}
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user