fix: enhance header layout, improve error logging, and update router fallback

- adjust header styles for better responsiveness
- improve error message for initial data load
- add fallback element to router provider
- optimize chunking in Vite configuration

Author: MarkusNeusinger

app/src/components/Header.tsx

@@ -84,7 +84,14 @@ export const Header = memo(function Header({ stats, onRandom }: HeaderProps) {
   }, [onRandom]);
 
   return (
-    <Box component="header" sx={{ textAlign: 'center', mb: 4 }}>
+    <Box component="header" sx={{
+      textAlign: 'center',
+      mb: 4,
+      minHeight: { xs: '3.5rem', sm: '4.5rem', md: '6rem' },
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'center',
+    }}>
       <Typography
         variant="h2"
         component="h1"

app/src/components/Layout.tsx

@@ -59,9 +59,9 @@ export function AppDataProvider({ children }: { children: ReactNode }) {
           setStats(data);
         }
       } catch (err) {
-        console.error('Error loading initial data:', err);
+        console.warn('Initial data load incomplete:', err instanceof Error ? err.message : err);
       }
-    });
+    }, { timeout: 2000 });
     return () => window.cancelIdleCallback(id);
   }, []);
 

app/src/router.tsx

@@ -39,7 +39,7 @@ export function AppRouter() {
     <HelmetProvider>
       <ErrorBoundary>
         <AppDataProvider>
-          <RouterProvider router={router} />
+          <RouterProvider router={router} fallbackElement={<LazyFallback />} />
         </AppDataProvider>
       </ErrorBoundary>
     </HelmetProvider>

app/vite.config.ts

@@ -20,8 +20,10 @@ export default defineConfig({
     rollupOptions: {
       output: {
         manualChunks(id) {
+          if (id.includes('node_modules/@mui/icons-material/')) return 'mui-icons';
           if (id.includes('node_modules/@mui/')) return 'mui';
-          if (id.includes('node_modules/react/') || id.includes('node_modules/react-dom/') || id.includes('node_modules/react-router-dom/')) return 'vendor';
+          if (id.includes('node_modules/@emotion/')) return 'mui';
+          if (id.includes('node_modules/react/') || id.includes('node_modules/react-dom/') || id.includes('node_modules/react-router')) return 'vendor';
         },
       },
     },