- Stack title-hero poster/metadata vertically on mobile (flex-col md:flex-row),
switch backdrop tall breakpoint from sm to md
- Extract bio expand/collapse logic into reusable ExpandableText component;
use it in PersonHero and TitleHero
- Fix ContinueWatchingCard image to use fill + sizes instead of fixed
width/height to avoid layout shift
- Add fade-out gradient on genre chip scrollbar edge on mobile
- Show scaled-down ambient glow on mobile instead of hiding it entirely
- Humanize knownForDepartment labels (Acting→Actor, Directing→Director, etc.)
- Change cast member name from truncate to line-clamp-2 for wrapping
- Hide tooltip arrow via [&>:last-child]:hidden instead of color-matching it
- Apply safe-area-inset padding to HeroBanner content on notched devices
- Delete 10 API routes (stats, system-health, update-check, jobs/trigger,
backup/restore, person, titles import/resolve, registration/status) and
move logic into server actions in lib/actions/settings.ts and
lib/actions/watchlist.ts
- Refactor SystemHealthCards to accept initialData prop and hydrate Jotai
atoms via useHydrateAtoms; replace useSystemHealth SWR hook with a
lightweight useSystemHealthRefresh that calls getSystemHealthAction
- Convert BackupRestoreSection to use restoreBackupAction + useTransition
instead of a raw fetch call
- Split SystemStatusCard, BackgroundJobsCard, and StorageCard into
standalone components reading from systemHealthDataAtom
- Make SetupPage async with connection() to opt into dynamic rendering
* Fix mobile pinch zoom and content overlapping header/footer on iOS Safari
Add viewport export with maximumScale=1 and userScalable=false to prevent
pinch-to-zoom. Add viewportFit=cover for proper safe area support.
Fix content rendering above the sticky header and below the fixed mobile
tab bar on iOS Safari by adding relative z-0 to the content wrapper,
creating a stacking context that keeps page content below both navigation
elements.
https://claude.ai/code/session_01Re8ndXPAMVMtiHZFVNDK7S
* Add safe area inset support for iOS 26 and fix film grain z-index
- Add safe-area-inset-top padding to NavBar for notch/Dynamic Island
- Add safe-area-inset-left/right to NavBar, main content, and
MobileTabBar for landscape mode
- Account for safe-area-inset-bottom in content wrapper padding so
content isn't hidden behind MobileTabBar + home indicator
- Lower film grain overlay z-index from 9999 to 1 to avoid triggering
iOS 26 Safari's fixed-element tab tinting behavior
https://claude.ai/code/session_01Re8ndXPAMVMtiHZFVNDK7S
* Hide ambient glow on mobile where it overwhelms the viewport
The 800x600px blurred glow blob dominates narrow mobile screens and
clashes with title backdrop images. Hidden below sm breakpoint.
https://claude.ai/code/session_01Re8ndXPAMVMtiHZFVNDK7S
* Fix asymmetric safe-area insets using separate pl/pr padding
The previous px-[max(...,env(safe-area-inset-left))] shorthand applied
only the left inset to both sides. Split into separate pl/pr with the
correct env() variable for each side.
https://claude.ai/code/session_01Re8ndXPAMVMtiHZFVNDK7S
---------
Co-authored-by: Claude <noreply@anthropic.com>
- Add global MotionConfig reducedMotion="user" in root layout
- Add color-scheme: dark, theme-color meta, skip-to-main-content link
- Add aria-hidden={true} to ~60+ decorative icons across 33 files
- Add aria-label to all icon-only buttons (logout, star rating, play, delete, etc.)
- Replace transition-all with specific properties (11 files)
- Add motion-safe: prefix for CSS hover transforms and animate-pulse
- Add prefers-reduced-motion: reduce override in globals.css
- Add useReducedMotion guard to status-dot pulsing animation
- Fix focus-visible styles on auth form inputs (focus → focus-visible, stronger ring)
- Add text-balance to all headings (13 files)
- Replace "..." with "…" (U+2026) in all loading/placeholder text
- Add autocomplete, spellCheck, role="alert" to auth form
- Add aria-label to Switch controls and filmography select
- Fix heading hierarchy (h3 → h2 where h2 was skipped)
- Add break-words to title overview, overscroll-contain to drawer
- Add confirmation dialog for destructive library removal
- Add group-focus-within:opacity-100 for keyboard-accessible backup actions
- Add role="radio" + aria-checked to star rating buttons
- Add aria-label to carousel region, role="img" to TMDB logo SVG
- Add text-foreground to native select for dark mode consistency
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
overflow-x-hidden on the pages wrapper div created a new scroll
context that prevented position: sticky from working on the header.
Moving it to <body> preserves the horizontal overflow clipping
without breaking sticky positioning.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Replace client-side session checks (useSession + router.replace) with
a two-layer server-side approach: Next.js middleware performs a fast
cookie presence check for all protected routes, and the (pages) layout
does a full server-side session validation before rendering.
Move login/register into a dedicated (auth) route group with its own
minimal layout so they sit outside the authenticated shell. Lift the
Toaster to the root layout so it remains available across all route
groups.
Add all 10 milestones: Drizzle ORM + SQLite database with WAL mode,
Better Auth email/password authentication, TMDB API integration for
search and metadata import, TV season/episode caching, user tracking
(watchlist/status/watches/ratings with auto-transitions), discovery
feeds (continue watching, library, recommendations), US streaming
availability via TMDB providers, background job scheduler with
instrumentation hook, and dark cinema-themed frontend with DM Serif
Display + DM Sans typography and amber accent design system.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
jake
