From 8fc7dff792e06c67f17d734be6f9b8a38cfae347 Mon Sep 17 00:00:00 2001
From: Chad Curtis <chad@chadwick.site>
Date: Thu, 19 Feb 2026 07:52:59 -0600
Subject: [PATCH] Fix mobile APK issues: sticky headers and video playback

- Make headers sticky on all screen sizes (not just desktop)
- Add sticky positioning to settings tabs
- Add webkit-playsinline and x-webkit-airplay attributes for better mobile video support
---
 src/components/VideoPlayer.tsx | 2 ++
 src/lib/utils.ts               | 5 ++---
 src/pages/SettingsPage.tsx     | 2 +-
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/VideoPlayer.tsx b/src/components/VideoPlayer.tsx
index 020b2e6f..b33ced5f 100644
--- a/src/components/VideoPlayer.tsx
+++ b/src/components/VideoPlayer.tsx
@@ -143,6 +143,8 @@ export function VideoPlayer({ src, poster, className }: VideoPlayerProps) {
         className="w-full max-h-[70vh] cursor-pointer"
         playsInline
         preload="metadata"
+        {...({ 'webkit-playsinline': 'true' } as any)}
+        {...({ 'x-webkit-airplay': 'allow' } as any)}
         onClick={handleVideoClick}
         onPlay={() => { setIsPlaying(true); setHasStarted(true); }}
         onPause={() => setIsPlaying(false)}
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index e498c42a..e1cbd781 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -7,7 +7,6 @@ export function cn(...inputs: ClassValue[]) {
 
 /**
  * Sticky header class for pages inside MainLayout.
- * On mobile, page headers scroll naturally with the content.
- * On desktop (sidebar breakpoint) they stick to the top of the viewport.
+ * Headers stick to the top of the viewport on all screen sizes.
  */
-export const STICKY_HEADER_CLASS = 'sidebar:sticky sidebar:top-0';
+export const STICKY_HEADER_CLASS = 'sticky top-0';
diff --git a/src/pages/SettingsPage.tsx b/src/pages/SettingsPage.tsx
index be071b8d..dc3e14e5 100644
--- a/src/pages/SettingsPage.tsx
+++ b/src/pages/SettingsPage.tsx
@@ -38,7 +38,7 @@ export function SettingsPage() {
         </div>
 
         {/* Tab navigation */}
-        <div className="flex border-b border-border">
+        <div className={cn(STICKY_HEADER_CLASS, 'flex border-b border-border bg-background/95 backdrop-blur-md z-10')}>
           <SettingsTab to="/settings/profile" label="Profile" active={activeSection === 'profile'} />
           <SettingsTab to="/settings/content" label="Content" active={activeSection === 'content'} />
           <SettingsTab to="/settings/advanced" label="Advanced" active={activeSection === 'advanced'} />