mirror of
https://github.com/jakejarvis/sofa.git
synced 2026-07-14 18:15:56 -04:00
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:
@@ -169,7 +169,7 @@ export default function DashboardPage() {
|
||||
icon={<IconPlayerPlay size={20} className="text-primary" />}
|
||||
>
|
||||
<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}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
@@ -283,7 +283,7 @@ function ContinueWatchingCard({ item }: { item: ContinueWatchingItem }) {
|
||||
return (
|
||||
<Link
|
||||
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 */}
|
||||
<div className="relative aspect-video overflow-hidden bg-muted">
|
||||
|
||||
@@ -632,9 +632,14 @@ export default function TitleDetailPage() {
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
{totalCount > 0 && (
|
||||
<div className="hidden w-24 sm:block">
|
||||
<Progress value={progressPercent} />
|
||||
</div>
|
||||
<>
|
||||
<span className="text-xs tabular-nums text-muted-foreground sm:hidden">
|
||||
{Math.round(progressPercent)}%
|
||||
</span>
|
||||
<div className="hidden w-24 sm:block">
|
||||
<Progress value={progressPercent} />
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{totalCount > 0 && watchedCount < totalCount && (
|
||||
<button
|
||||
|
||||
@@ -75,7 +75,7 @@ export function NavBar() {
|
||||
<Kbd className="ml-1">⌘K</Kbd>
|
||||
</button>
|
||||
<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}
|
||||
</span>
|
||||
<button
|
||||
|
||||
Reference in New Issue
Block a user