feat(web): add responsive layout with mobile sidebar overlay (MS15-FE-005)

Mobile (< 768px): sidebar hidden, hamburger button in header, sidebar
slides in as fixed overlay with backdrop.

Tablet (768-1023px): sidebar toggleable via hamburger, pushes content.

Desktop (>= 1024px): sidebar always visible, no hamburger button.

SidebarContext extended with mobileOpen state and isMobile detection
via matchMedia listener.

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

apps/web/src/app/(authenticated)/layout.tsx

@@ -27,11 +27,16 @@ interface AppShellProps {
 }
 
 function AppShell({ children }: AppShellProps): React.JSX.Element {
-  const { collapsed } = useSidebar();
+  const { collapsed, isMobile } = useSidebar();
+
+  // On tablet (md–lg), hide sidebar from the grid when the sidebar is collapsed.
+  // On mobile, the sidebar is fixed-position so the grid is always single-column.
+  const sidebarHidden = !isMobile && collapsed;
 
   return (
     <div
       className="app-shell"
+      data-sidebar-hidden={sidebarHidden ? "true" : undefined}
       style={
         {
           "--sidebar-w": collapsed ? SIDEBAR_COLLAPSED_WIDTH : SIDEBAR_EXPANDED_WIDTH,