Add responsive mobile layout with bottom tab navigation

Convert sidebar to fixed bottom tab bar on mobile (<768px) with icon-only
nav items and active indicator. Todo list uses stacked card layout on mobile
instead of 5-column grid. Reduce padding throughout for small screens and
enable user scaling for accessibility.

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

frontend/src/components/AppSidebar.tsx

@@ -16,6 +16,7 @@ import {
   SidebarMenuButton,
   SidebarMenuItem,
   SidebarSeparator,
+  useSidebar,
 } from "@/components/ui/sidebar";
 import Avatar from "@/components/ui/avatar";
 import LanguageSwitcher from "@/components/LanguageSwitcher";
@@ -37,6 +38,42 @@ const AppSidebar = () => {
   const { unreadCount } = useNotification();
   const { user } = useUser();
   const t = useTranslation();
+  const { isMobile } = useSidebar();
+
+  if (isMobile) {
+    return (
+      <Sidebar>
+        <nav className="flex items-center justify-around px-1 py-1.5 safe-bottom">
+          {navItems.map((item) => {
+            const isActive = pathname?.startsWith(item.href);
+            const isNotifications = item.href === "/notifications";
+            return (
+              <Link
+                key={item.href}
+                href={item.href}
+                className={`relative flex flex-col items-center gap-0.5 rounded-lg px-3 py-1.5 text-[10px] font-medium transition-colors ${
+                  isActive
+                    ? "text-primary"
+                    : "text-muted-foreground"
+                }`}
+              >
+                <span className="relative">
+                  <item.icon className="h-5 w-5" />
+                  {isNotifications && unreadCount > 0 && (
+                    <span className="absolute -right-1.5 -top-1 h-2 w-2 rounded-full bg-red-500" />
+                  )}
+                </span>
+                <span>{t(item.labelKey)}</span>
+                {isActive && (
+                  <span className="absolute -bottom-1 h-0.5 w-4 rounded-full bg-primary" />
+                )}
+              </Link>
+            );
+          })}
+        </nav>
+      </Sidebar>
+    );
+  }
 
   return (
     <Sidebar variant="inset" className="h-[calc(100vh-3rem)] self-start bg-white">