feat(ui): add mobile-responsive layout with hamburger drawer

Adds MobileHeader with hamburger button (left-aligned) that opens a
slide-in sidebar drawer on mobile. Desktop layout is unchanged. All
hardcoded multi-column grids updated with responsive Tailwind breakpoints.

Co-Authored-By: Jack Levy

frontend/components/shared/AuthGuard.tsx

@@ -4,6 +4,7 @@ import { useEffect, useState } from "react";
 import { usePathname, useRouter } from "next/navigation";
 import { useAuthStore } from "@/stores/authStore";
 import { Sidebar } from "./Sidebar";
+import { MobileHeader } from "./MobileHeader";
 
 const PUBLIC_PATHS = ["/login", "/register"];
 
@@ -13,6 +14,7 @@ export function AuthGuard({ children }: { children: React.ReactNode }) {
   const token = useAuthStore((s) => s.token);
   // Zustand persist hydrates asynchronously — wait for it before rendering
   const [hydrated, setHydrated] = useState(false);
+  const [drawerOpen, setDrawerOpen] = useState(false);
 
   useEffect(() => {
     setHydrated(true);
@@ -38,12 +40,30 @@ export function AuthGuard({ children }: { children: React.ReactNode }) {
   // Authenticated: render the full app shell
   return (
     <div className="flex h-screen bg-background">
-      <Sidebar />
-      <main className="flex-1 overflow-auto">
-        <div className="container mx-auto px-6 py-6 max-w-7xl">
-          {children}
+      {/* Desktop sidebar — hidden on mobile */}
+      <div className="hidden md:flex">
+        <Sidebar />
+      </div>
+
+      {/* Mobile slide-in drawer */}
+      {drawerOpen && (
+        <div className="fixed inset-0 z-50 md:hidden">
+          <div className="absolute inset-0 bg-black/50" onClick={() => setDrawerOpen(false)} />
+          <div className="absolute left-0 top-0 bottom-0">
+            <Sidebar onClose={() => setDrawerOpen(false)} />
+          </div>
         </div>
-      </main>
+      )}
+
+      {/* Content column */}
+      <div className="flex-1 flex flex-col min-h-0">
+        <MobileHeader onMenuClick={() => setDrawerOpen(true)} />
+        <main className="flex-1 overflow-auto">
+          <div className="container mx-auto px-4 md:px-6 py-6 max-w-7xl">
+            {children}
+          </div>
+        </main>
+      </div>
     </div>
   );
 }

frontend/components/shared/MobileHeader.tsx

@@ -0,0 +1,16 @@
+"use client";
+import { Menu, Landmark } from "lucide-react";
+
+export function MobileHeader({ onMenuClick }: { onMenuClick: () => void }) {
+  return (
+    <header className="md:hidden flex items-center justify-between px-4 py-3 border-b border-border bg-card shrink-0">
+      <button onClick={onMenuClick} className="p-2 rounded-md hover:bg-accent transition-colors" aria-label="Open menu">
+        <Menu className="w-5 h-5" />
+      </button>
+      <div className="flex items-center gap-2">
+        <Landmark className="w-5 h-5 text-primary" />
+        <span className="font-semibold text-sm">PocketVeto</span>
+      </div>
+    </header>
+  );
+}

frontend/components/shared/Sidebar.tsx

@@ -11,6 +11,7 @@ import {
   Settings,
   Landmark,
   LogOut,
+  X,
 } from "lucide-react";
 import { useQueryClient } from "@tanstack/react-query";
 import { cn } from "@/lib/utils";
@@ -26,7 +27,7 @@ const NAV = [
   { href: "/settings", label: "Admin", icon: Settings, adminOnly: true },
 ];
 
-export function Sidebar() {
+export function Sidebar({ onClose }: { onClose?: () => void }) {
   const pathname = usePathname();
   const router = useRouter();
   const qc = useQueryClient();
@@ -43,7 +44,12 @@ export function Sidebar() {
     <aside className="w-56 shrink-0 border-r border-border bg-card flex flex-col">
       <div className="p-4 border-b border-border flex items-center gap-2">
         <Landmark className="w-5 h-5 text-primary" />
-        <span className="font-semibold text-sm">PocketVeto</span>
+        <span className="font-semibold text-sm flex-1">PocketVeto</span>
+        {onClose && (
+          <button onClick={onClose} className="p-1 rounded-md hover:bg-accent transition-colors" aria-label="Close menu">
+            <X className="w-4 h-4" />
+          </button>
+        )}
       </div>
 
       <nav className="flex-1 p-3 space-y-1">
@@ -53,6 +59,7 @@ export function Sidebar() {
             <Link
               key={href}
               href={href}
+              onClick={onClose}
               className={cn(
                 "flex items-center gap-3 px-3 py-2 rounded-md text-sm transition-colors",
                 active