mirror of
https://github.com/jakejarvis/sofa.git
synced 2026-08-29 01:35:39 -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" />}
|
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">
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
Reference in New Issue
Block a user