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

@@ -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)}

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';

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'} />