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/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