Mobile viewport fixes: responsive card width, nav cleanup, season percentages

- Continue Watching card uses viewport-relative width on mobile (calc(100vw-3rem))
  with edge-to-edge scroll container using negative margin trick
- Nav bar hides user name on mobile (bottom tab bar shows it instead)
- Season rows show percentage text on mobile where progress bar is hidden
- Season 5 correctly shows "94%" instead of requiring the hidden progress bar

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-01 11:50:02 -05:00
co-authored by Claude Opus 4.6
parent b96c7ac540
commit 0e8ea15cd0
3 changed files with 11 additions and 6 deletions
+2 -2
View File
@@ -169,7 +169,7 @@ export default function DashboardPage() {
icon={<IconPlayerPlay size={20} className="text-primary" />} icon={<IconPlayerPlay size={20} className="text-primary" />}
> >
<motion.div <motion.div
className="feed-scroll flex gap-4 overflow-x-auto pb-2" className="feed-scroll -mx-4 flex gap-4 overflow-x-auto px-4 pb-2 sm:-mx-0 sm:px-0"
variants={staggerContainer} variants={staggerContainer}
initial="hidden" initial="hidden"
animate="visible" animate="visible"
@@ -283,7 +283,7 @@ function ContinueWatchingCard({ item }: { item: ContinueWatchingItem }) {
return ( return (
<Link <Link
href={`/titles/${item.title.id}`} href={`/titles/${item.title.id}`}
className="group relative w-72 shrink-0 overflow-hidden rounded-xl border border-border/30 bg-card/50 transition-all hover:border-primary/20 hover:shadow-lg hover:shadow-black/25" className="group relative w-[calc(100vw-3rem)] shrink-0 overflow-hidden rounded-xl border border-border/30 bg-card/50 transition-all hover:border-primary/20 hover:shadow-lg hover:shadow-black/25 sm:w-72"
> >
{/* Episode still / backdrop image */} {/* Episode still / backdrop image */}
<div className="relative aspect-video overflow-hidden bg-muted"> <div className="relative aspect-video overflow-hidden bg-muted">
+5
View File
@@ -632,9 +632,14 @@ export default function TitleDetailPage() {
</div> </div>
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
{totalCount > 0 && ( {totalCount > 0 && (
<>
<span className="text-xs tabular-nums text-muted-foreground sm:hidden">
{Math.round(progressPercent)}%
</span>
<div className="hidden w-24 sm:block"> <div className="hidden w-24 sm:block">
<Progress value={progressPercent} /> <Progress value={progressPercent} />
</div> </div>
</>
)} )}
{totalCount > 0 && watchedCount < totalCount && ( {totalCount > 0 && watchedCount < totalCount && (
<button <button
+1 -1
View File
@@ -75,7 +75,7 @@ export function NavBar() {
<Kbd className="ml-1">K</Kbd> <Kbd className="ml-1">K</Kbd>
</button> </button>
<div className="flex items-center gap-2 rounded-lg border border-border/30 px-2.5 py-1"> <div className="flex items-center gap-2 rounded-lg border border-border/30 px-2.5 py-1">
<span className="text-sm text-muted-foreground"> <span className="hidden text-sm text-muted-foreground sm:inline">
{session.user.name} {session.user.name}
</span> </span>
<button <button