feat: Redesign UI with consistent card styling and mobile header

- Updated track page cards to match home page styling with vibrant colors
- Applied consistent 140px height cards across track and insights pages
- Added mobile header bar with connection status and user menu
- Moved user menu from floating top-left to fixed header top-right
- Updated insights dashboard with home page color palette (#E91E63, #1976D2, etc.)
- Centered cards with minWidth constraints (200px for stats, 400px for charts)
- Fixed hydration mismatch by replacing JS media queries with CSS breakpoints
- Improved accessibility with viewport settings (removed zoom restrictions)
- Added UI improvements documentation

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

maternal-web/components/layouts/AppShell/AppShell.tsx

@@ -62,20 +62,65 @@ export const AppShell = ({ children }: AppShellProps) => {
       flexDirection: 'column',
       minHeight: '100vh',
       bgcolor: 'background.default',
-      pb: isMobile ? '64px' : 0, // Space for tab bar
+      pb: { xs: '64px', md: 0 }, // Space for tab bar on mobile
     }}>
       {!isMobile && <MobileNav />}
 
-      {/* Mobile User Menu Button - Top Left */}
+      {/* Mobile Header Bar */}
       {isMobile && (
         <Box
           sx={{
             position: 'fixed',
-            top: 8,
-            left: 8,
+            top: 0,
+            left: 0,
+            right: 0,
+            height: 48,
+            bgcolor: 'background.paper',
+            borderBottom: '1px solid',
+            borderColor: 'divider',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            px: 2,
             zIndex: 1200,
+            boxShadow: 1,
           }}
         >
+          {/* Connection Status & Presence Indicator */}
+          <Box
+            sx={{
+              display: 'flex',
+              gap: 1,
+            }}
+          >
+            <Tooltip title={isConnected ? t('connection.syncActive') : t('connection.syncDisconnected')}>
+              <Chip
+                icon={isConnected ? <Wifi /> : <WifiOff />}
+                label={isConnected ? t('connection.live') : t('connection.offline')}
+                size="small"
+                color={isConnected ? 'success' : 'default'}
+                sx={{
+                  fontWeight: 600,
+                }}
+              />
+            </Tooltip>
+
+            {isConnected && presence.count > 1 && (
+              <Tooltip title={t('connection.familyMembersOnline', { count: presence.count })}>
+                <Chip
+                  icon={<People />}
+                  label={presence.count}
+                  size="small"
+                  color="primary"
+                  sx={{
+                    fontWeight: 600,
+                  }}
+                />
+              </Tooltip>
+            )}
+          </Box>
+
+          {/* User Menu Button - Top Right */}
           <IconButton
             onClick={handleMenuOpen}
             size="small"
@@ -83,14 +128,6 @@ export const AppShell = ({ children }: AppShellProps) => {
             aria-controls={anchorEl ? 'user-menu' : undefined}
             aria-haspopup="true"
             aria-expanded={anchorEl ? 'true' : undefined}
-            sx={{
-              bgcolor: 'background.paper',
-              boxShadow: 1,
-              '&:hover': {
-                bgcolor: 'background.paper',
-                boxShadow: 2,
-              },
-            }}
           >
             <Avatar
               sx={{
@@ -110,8 +147,8 @@ export const AppShell = ({ children }: AppShellProps) => {
             open={Boolean(anchorEl)}
             onClose={handleMenuClose}
             onClick={handleMenuClose}
-            transformOrigin={{ horizontal: 'left', vertical: 'top' }}
-            anchorOrigin={{ horizontal: 'left', vertical: 'bottom' }}
+            transformOrigin={{ horizontal: 'right', vertical: 'top' }}
+            anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
             sx={{
               mt: 1,
             }}
@@ -145,52 +182,55 @@ export const AppShell = ({ children }: AppShellProps) => {
         </Box>
       )}
 
-      {/* Connection Status & Presence Indicator */}
-      <Box
-        sx={{
-          position: 'fixed',
-          top: isMobile ? 8 : 16,
-          right: isMobile ? 8 : 16,
-          zIndex: 1200,
-          display: 'flex',
-          gap: 1,
-        }}
-      >
-        <Tooltip title={isConnected ? t('connection.syncActive') : t('connection.syncDisconnected')}>
-          <Chip
-            icon={isConnected ? <Wifi /> : <WifiOff />}
-            label={isConnected ? t('connection.live') : t('connection.offline')}
-            size="small"
-            color={isConnected ? 'success' : 'default'}
-            sx={{
-              fontWeight: 600,
-              boxShadow: 1,
-            }}
-          />
-        </Tooltip>
-
-        {isConnected && presence.count > 1 && (
-          <Tooltip title={t('connection.familyMembersOnline', { count: presence.count })}>
+      {/* Connection Status & Presence Indicator - Desktop Only */}
+      {!isMobile && (
+        <Box
+          sx={{
+            position: 'fixed',
+            top: 16,
+            right: 16,
+            zIndex: 1200,
+            display: 'flex',
+            gap: 1,
+          }}
+        >
+          <Tooltip title={isConnected ? t('connection.syncActive') : t('connection.syncDisconnected')}>
             <Chip
-              icon={<People />}
-              label={presence.count}
+              icon={isConnected ? <Wifi /> : <WifiOff />}
+              label={isConnected ? t('connection.live') : t('connection.offline')}
               size="small"
-              color="primary"
+              color={isConnected ? 'success' : 'default'}
               sx={{
                 fontWeight: 600,
                 boxShadow: 1,
               }}
             />
           </Tooltip>
-        )}
-      </Box>
+
+          {isConnected && presence.count > 1 && (
+            <Tooltip title={t('connection.familyMembersOnline', { count: presence.count })}>
+              <Chip
+                icon={<People />}
+                label={presence.count}
+                size="small"
+                color="primary"
+                sx={{
+                  fontWeight: 600,
+                  boxShadow: 1,
+                }}
+              />
+            </Tooltip>
+          )}
+        </Box>
+      )}
 
       <Container
         maxWidth={isTablet ? 'md' : 'lg'}
         sx={{
           flex: 1,
-          px: isMobile ? 2 : 3,
+          px: { xs: 2, md: 3 },
           py: 3,
+          pt: { xs: '64px', md: 3 }, // Add top padding for header bar on mobile
         }}
       >
         {children}