feat(pwa): make settings scrollable, scaling improvements

frontend/src/components/Layout/BottomNavigation.tsx

@@ -0,0 +1,192 @@
+import React from 'react';
+import {
+  BottomNavigation as MuiBottomNavigation,
+  BottomNavigationAction,
+  Paper,
+  useTheme,
+} from '@mui/material';
+import {
+  Dashboard as DashboardIcon,
+  CloudUpload as UploadIcon,
+  Label as LabelIcon,
+  Settings as SettingsIcon,
+} from '@mui/icons-material';
+import { useNavigate, useLocation } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { usePWA } from '../../hooks/usePWA';
+
+const BottomNavigation: React.FC = () => {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const theme = useTheme();
+  const { t } = useTranslation();
+  const isPWA = usePWA();
+
+  // Don't render if not in PWA mode
+  if (!isPWA) {
+    return null;
+  }
+
+  // Map paths to nav values
+  const getNavValue = (pathname: string): string => {
+    if (pathname === '/dashboard') return 'dashboard';
+    if (pathname === '/upload') return 'upload';
+    if (pathname === '/labels') return 'labels';
+    if (pathname === '/settings' || pathname === '/profile') return 'settings';
+    return 'dashboard';
+  };
+
+  const handleNavigation = (_event: React.SyntheticEvent, newValue: string) => {
+    switch (newValue) {
+      case 'dashboard':
+        navigate('/dashboard');
+        break;
+      case 'upload':
+        navigate('/upload');
+        break;
+      case 'labels':
+        navigate('/labels');
+        break;
+      case 'settings':
+        navigate('/settings');
+        break;
+    }
+  };
+
+  return (
+    <Paper
+      sx={{
+        position: 'fixed',
+        bottom: 0,
+        left: 0,
+        right: 0,
+        zIndex: 1100,
+        display: { xs: 'block', md: 'none' },
+        background: theme.palette.mode === 'light'
+          ? 'linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(248,250,252,0.98) 100%)'
+          : 'linear-gradient(180deg, rgba(30,30,30,0.98) 0%, rgba(18,18,18,0.98) 100%)',
+        backdropFilter: 'blur(20px)',
+        borderTop: theme.palette.mode === 'light'
+          ? '1px solid rgba(226,232,240,0.5)'
+          : '1px solid rgba(255,255,255,0.1)',
+        boxShadow: theme.palette.mode === 'light'
+          ? '0 -4px 32px rgba(0,0,0,0.08)'
+          : '0 -4px 32px rgba(0,0,0,0.3)',
+        // iOS safe area support - add 8px fixed padding for extra space
+        paddingBottom: 'calc(8px + env(safe-area-inset-bottom, 0px))',
+      }}
+      elevation={0}
+    >
+      <MuiBottomNavigation
+        value={getNavValue(location.pathname)}
+        onChange={handleNavigation}
+        sx={{
+          background: 'transparent',
+          height: '64px',
+          '& .MuiBottomNavigationAction-root': {
+            color: 'text.secondary',
+            minWidth: 'auto',
+            padding: '8px 12px',
+            gap: '4px',
+            transition: 'all 0.2s ease-in-out',
+            '& .MuiBottomNavigationAction-label': {
+              fontSize: '0.75rem',
+              fontWeight: 500,
+              letterSpacing: '0.025em',
+              marginTop: '4px',
+              transition: 'all 0.2s ease-in-out',
+              '&.Mui-selected': {
+                fontSize: '0.75rem',
+              },
+            },
+            '& .MuiSvgIcon-root': {
+              fontSize: '1.5rem',
+              transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+            },
+            '&.Mui-selected': {
+              color: '#6366f1',
+              '& .MuiSvgIcon-root': {
+                transform: 'scale(1.1)',
+                filter: 'drop-shadow(0 2px 8px rgba(99,102,241,0.3))',
+              },
+            },
+            // iOS-style touch feedback
+            '@media (pointer: coarse)': {
+              minHeight: '56px',
+              '&:active': {
+                transform: 'scale(0.95)',
+              },
+            },
+          },
+        }}
+      >
+        <BottomNavigationAction
+          label={t('navigation.dashboard')}
+          value="dashboard"
+          icon={<DashboardIcon />}
+          sx={{
+            '&.Mui-selected': {
+              '& .MuiBottomNavigationAction-label': {
+                background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)',
+                backgroundClip: 'text',
+                WebkitBackgroundClip: 'text',
+                WebkitTextFillColor: 'transparent',
+                fontWeight: 600,
+              },
+            },
+          }}
+        />
+        <BottomNavigationAction
+          label={t('navigation.upload')}
+          value="upload"
+          icon={<UploadIcon />}
+          sx={{
+            '&.Mui-selected': {
+              '& .MuiBottomNavigationAction-label': {
+                background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)',
+                backgroundClip: 'text',
+                WebkitBackgroundClip: 'text',
+                WebkitTextFillColor: 'transparent',
+                fontWeight: 600,
+              },
+            },
+          }}
+        />
+        <BottomNavigationAction
+          label={t('navigation.labels')}
+          value="labels"
+          icon={<LabelIcon />}
+          sx={{
+            '&.Mui-selected': {
+              '& .MuiBottomNavigationAction-label': {
+                background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)',
+                backgroundClip: 'text',
+                WebkitBackgroundClip: 'text',
+                WebkitTextFillColor: 'transparent',
+                fontWeight: 600,
+              },
+            },
+          }}
+        />
+        <BottomNavigationAction
+          label={t('settings.title')}
+          value="settings"
+          icon={<SettingsIcon />}
+          sx={{
+            '&.Mui-selected': {
+              '& .MuiBottomNavigationAction-label': {
+                background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)',
+                backgroundClip: 'text',
+                WebkitBackgroundClip: 'text',
+                WebkitTextFillColor: 'transparent',
+                fontWeight: 600,
+              },
+            },
+          }}
+        />
+      </MuiBottomNavigation>
+    </Paper>
+  );
+};
+
+export default BottomNavigation;

frontend/src/hooks/usePWA.ts

@@ -0,0 +1,31 @@
+import { useState, useEffect } from 'react';
+
+/**
+ * Hook to detect if the app is running in PWA/standalone mode
+ * @returns boolean indicating if running as installed PWA
+ */
+export const usePWA = (): boolean => {
+  const [isPWA, setIsPWA] = useState(false);
+
+  useEffect(() => {
+    const checkPWAMode = () => {
+      // Check if running in standalone mode (installed PWA)
+      const isStandalone = window.matchMedia('(display-mode: standalone)').matches;
+      // iOS Safari specific check
+      const isIOSStandalone = (window.navigator as any).standalone === true;
+
+      setIsPWA(isStandalone || isIOSStandalone);
+    };
+
+    checkPWAMode();
+
+    // Listen for display mode changes
+    const mediaQuery = window.matchMedia('(display-mode: standalone)');
+    const handleChange = () => checkPWAMode();
+
+    mediaQuery.addEventListener('change', handleChange);
+    return () => mediaQuery.removeEventListener('change', handleChange);
+  }, []);
+
+  return isPWA;
+};

frontend/src/pages/SettingsPage.tsx

@@ -47,6 +47,7 @@ import { useAuth } from '../contexts/AuthContext';
 import api, { queueService, ErrorHelper, ErrorCodes, userWatchService, UserWatchDirectoryResponse } from '../services/api';
 import OcrLanguageSelector from '../components/OcrLanguageSelector';
 import LanguageSelector from '../components/LanguageSelector';
+import { usePWA } from '../hooks/usePWA';
 import { useTranslation } from 'react-i18next';
 
 interface User {
@@ -194,6 +195,7 @@ function useDebounce<T extends (...args: any[]) => any>(func: T, delay: number):
 const SettingsPage: React.FC = () => {
   const { t } = useTranslation();
   const { user: currentUser } = useAuth();
+  const isPWA = usePWA();
   const [tabValue, setTabValue] = useState<number>(0);
   const [settings, setSettings] = useState<Settings>({
     ocrLanguage: 'eng',
@@ -837,20 +839,41 @@ const SettingsPage: React.FC = () => {
   };
 
   return (
-    <Container maxWidth="lg" sx={{ mt: 4, mb: 4 }}>
-      <Typography variant="h4" sx={{ mb: 4 }}>
+    <Container
+      maxWidth="lg"
+      sx={{
+        mt: 4,
+        mb: 4,
+        px: isPWA ? { xs: 1, sm: 2, md: 3 } : undefined,
+      }}
+    >
+      <Typography variant="h4" sx={{ mb: 4, px: isPWA ? { xs: 1, sm: 0 } : 0 }}>
         {t('settings.title')}
       </Typography>
 
       <Paper sx={{ width: '100%' }}>
-        <Tabs value={tabValue} onChange={handleTabChange} aria-label="settings tabs">
+        <Tabs
+          value={tabValue}
+          onChange={handleTabChange}
+          aria-label="settings tabs"
+          variant="scrollable"
+          scrollButtons="auto"
+          allowScrollButtonsMobile
+          sx={{
+            '& .MuiTabs-scrollButtons': {
+              '&.Mui-disabled': {
+                opacity: 0.3,
+              },
+            },
+          }}
+        >
           <Tab label={t('settings.tabs.general')} />
           <Tab label={t('settings.tabs.ocrSettings')} />
           <Tab label={t('settings.tabs.userManagement')} />
           <Tab label={t('settings.tabs.serverConfiguration')} />
         </Tabs>
 
-        <Box sx={{ p: 3 }}>
+        <Box sx={{ p: { xs: 2, sm: 3 } }}>
           {tabValue === 0 && (
             <Box>
               <Typography variant="h6" sx={{ mb: 3 }}>