feat(responsive): mobile polish — topbar, drawer, footer, tabs, notification dropdown

Unifies the breakpoint system and fixes cross-layer CSS bugs that kept
the old mobile hide rules from ever taking effect.

Breakpoints:
- Document canonical xs/sm/md/lg/xl/2xl scale in variables.base.css
- Replace 968px one-offs with 1024px (app-details, app-page-editor)
- Make details tab-panel max-width responsive (min(70ch, 100%))

Topbar (< md):
- Hide breadcrumb in components layer so cross-layer overrides actually win
- Dock search icon alongside right-column icons via flex layout
- Add xs (400px) tightening for hit-area preservation
- Hide brand divider alongside hidden brand name
- Switch hover states to theme-aware --app-dropdown-hover-background-color

Mobile drawer:
- Icon-bar now vertical like desktop (was horizontal top strip, effectively invisible)
- Sidebar shifted 52px right so icon-bar and sidebar slide in as one 280px unit
- Add breathing room above first nav item (20px top padding)

List tabs:
- Rewrite .app-list-tabs to horizontal scroll with hidden scrollbar, snap,
  and mask-image gradient fades; add initListTabs to scroll active into view
- Register as runtime component in app-init.js

List toolbar:
- Stack wide controls (multi-select, search/text inputs) full-width below sm,
  keep compact controls at natural width

Footer:
- New dedicated app-footer.css with mobile-first stacking, border-top separator,
  theme-aware hover; remove redundant rules from app-shell.css

Notification dropdown:
- Width with min(360px, 100vw - 2rem) and min-width: 0 override global
  details > ul rule; switch to position: fixed below md so it hugs the
  viewport right edge instead of the non-rightmost bell button

Content spacing:
- Add padding-block-start to .app-main-content on mobile (was 0)

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

web/css/layout/app-aside-icon-bar.css

@@ -102,57 +102,34 @@
     }
   }
 
+  /* Mobile drawer — the icon-bar slides in from the left alongside the sidebar,
+     staying vertical like desktop so menu switching works identically.
+     The two asides form one visual unit; both use the same slide transition. */
   @media (max-width: 767px) {
     aside.aside-icon-bar {
-      display: none;
+      display: block;
       position: fixed;
       top: var(--app-topbar-height);
+      bottom: 0;
       left: 0;
-      width: min(280px, 85vw);
+      width: 52px;
       z-index: var(--z-drawer);
-      border-bottom: 1px solid var(--app-border);
+      border-right: 1px solid var(--app-border);
       background: var(--app-sidebar-background-color);
+      transform: translateX(-100%);
+      transition: transform 300ms ease;
     }
 
     .drawer-open aside.aside-icon-bar {
-      display: block;
+      transform: translateX(0);
     }
 
+    /* Constrain nav to the aside height (the global 100vh rule breaks under
+       iOS Safari's dynamic address bar) and give the first icon breathing room
+       from the topbar edge. */
     aside.aside-icon-bar nav {
-      flex-direction: row;
-      height: auto;
-      justify-content: flex-start;
-      gap: 0;
-    }
-
-    aside.aside-icon-bar .aside-icon-footer {
-      display: flex;
-      gap: 0;
-    }
-
-    aside.aside-icon-bar ul {
-      display: flex;
-      gap: 0;
-    }
-
-    aside.aside-icon-bar li a,
-    aside.aside-icon-bar li button {
-      border-left: 0;
-      border-top: var(--app-icon-bar-border-width) solid transparent;
-    }
-
-    aside.aside-icon-bar li a:hover,
-    aside.aside-icon-bar li a.active,
-    aside.aside-icon-bar li button:hover,
-    aside.aside-icon-bar li button.active {
-      border-left: 0;
-      border-top: var(--app-icon-bar-border-width) solid var(--app-primary);
-    }
-
-    aside.aside-icon-bar li a:focus-visible,
-    aside.aside-icon-bar li button:focus-visible {
-      border-left-color: transparent;
-      border-top-color: transparent;
+      height: 100%;
+      padding-block: calc(var(--app-spacing) * 1.25);
     }
   }
 }

web/css/layout/app-shell.css

@@ -315,26 +315,12 @@
     display: block;
   }
 
-  body > footer,
   body > main {
     padding-block: var(--app-block-spacing-vertical);
   }
 
-  body > footer {
-    padding-inline: calc(var(--app-spacing) * 2);
-  }
+  /* Footer layout, spacing and colors live in components/app-footer.css. */
 
-  footer.site-footer {
-    padding-inline: calc(var(--app-spacing) * 2);
-  }
-
-  footer.site-footer a {
-    color: inherit;
-  }
-
-  body > footer a {
-    color: inherit;
-  }
   header[data-align="center"],
   hgroup[data-align="center"] > h1,
   hgroup[data-align="center"] > h2,
@@ -367,6 +353,13 @@
 
   .app-main-content {
     padding-inline: calc(var(--app-spacing) * 1);
+    padding-block-start: var(--app-spacing);
+  }
+
+  /* Details pages provide their own sticky titlebar with padding — let it manage
+     the gap to the topbar itself, don't double it. */
+  .app-main-content:has(.app-details-container) {
+    padding-block-start: 0;
   }
 
   @media (min-width: 576px) {

web/css/layout/app-sidebar.css

@@ -153,15 +153,17 @@
     }
   }
 
+  /* Mobile drawer — sidebar sits to the right of the 52px icon-bar.
+     Both slide in together (see app-aside-icon-bar.css mobile section). */
   @media (max-width: 767px) {
     .app-sidebar {
       position: fixed;
       top: var(--app-topbar-height);
-      left: 0;
+      left: 52px;
       bottom: 0;
-      width: min(280px, 85vw);
+      width: min(228px, calc(85vw - 52px));
       z-index: var(--z-drawer);
-      transform: translateX(-100%);
+      transform: translateX(calc(-100% - 52px));
       transition: transform 300ms ease;
       background: var(--app-sidebar-background-color);
       overflow-y: auto;
@@ -172,11 +174,7 @@
     }
 
     .app-sidebar-panels {
-      padding-block-start: calc(
-        var(--app-icon-bar-item-padding, 0.6875rem) * 2
-        + var(--app-icon-bar-item-size, 22px)
-        + var(--app-icon-bar-border-width, 3px)
-      );
+      padding-block-start: calc(var(--app-spacing) * 1.25);
       padding-block-end: calc(var(--app-spacing) + env(safe-area-inset-bottom));
     }
   }

web/css/layout/app-topbar.css

@@ -116,11 +116,11 @@
     flex-shrink: 0;
   }
 
-  @media (max-width: 576px) {
-    .app-topbar-left .app-breadcrumb {
-      display: none;
-    }
+  /* Breadcrumb mobile-hide lives in components/app-breadcrumb.css — cross-layer
+     overrides from the layout layer do not win against .app-breadcrumb's own
+     display:flex in the components layer. */
 
+  @media (max-width: 576px) {
     .app-topbar-search-trigger-text,
     .app-topbar-search-trigger-shortcut {
       display: none;
@@ -128,9 +128,47 @@
 
     .app-topbar-search-trigger {
       width: auto;
+      min-width: 2.25rem;
+      min-height: 2.25rem;
       padding: var(--app-topbar-item-padding);
       border: none;
     }
+
+    /* Dock the search icon alongside the right-column icons:
+       swap grid \u2192 flex so left flex-grows and center+right cluster on the right. */
+    .app-header nav.app-topbar {
+      display: flex;
+      grid-template-columns: unset;
+      gap: var(--app-topbar-list-gap);
+      align-items: center;
+    }
+
+    .app-topbar-left {
+      flex: 1 1 0%;
+      min-width: 0;
+    }
+
+    .app-topbar-center,
+    .app-topbar-right {
+      flex: 0 0 auto;
+    }
+
+    .app-topbar-center {
+      justify-content: flex-end;
+    }
+  }
+
+  /* xs — very narrow phones (iPhone SE 375, Pixel 4a portrait).
+     Tighten topbar chrome so every item keeps its 2.25rem hit area without overflow. */
+  @media (max-width: 400px) {
+    .app-header {
+      --app-topbar-list-gap: 2px;
+      padding-inline: calc(var(--app-spacing) * 0.5);
+    }
+
+    .app-header nav.app-topbar {
+      gap: calc(var(--app-spacing) * 0.5);
+    }
   }
 
   .app-topbar-menu-item-detail-sidebar {
@@ -192,24 +230,24 @@
   .app-topbar-right > li > a:hover,
   .app-topbar-right > li > button:hover,
   .app-header details.dropdown > summary:not([role]):hover {
-    background-color: color-mix(in srgb, var(--app-contrast) 8%, transparent);
+    background-color: var(--app-dropdown-hover-background-color);
     color: var(--app-color);
-    --app-background-color: color-mix(
-      in srgb,
-      var(--app-contrast) 8%,
-      transparent
-    );
+    --app-background-color: var(--app-dropdown-hover-background-color);
     --app-color: var(--app-color);
   }
 
   .app-topbar-right > li > a:active,
   .app-topbar-right > li > button:active,
   .app-header details.dropdown > summary:not([role]):active {
-    background-color: color-mix(in srgb, var(--app-contrast) 12%, transparent);
+    background-color: color-mix(
+      in srgb,
+      var(--app-dropdown-hover-background-color) 70%,
+      var(--app-contrast) 30%
+    );
     --app-background-color: color-mix(
       in srgb,
-      var(--app-contrast) 12%,
-      transparent
+      var(--app-dropdown-hover-background-color) 70%,
+      var(--app-contrast) 30%
     );
   }
 
@@ -372,7 +410,7 @@
   }
 
   .app-topbar-hamburger:hover {
-    background: color-mix(in srgb, var(--app-contrast) 8%, transparent);
+    background: var(--app-dropdown-hover-background-color);
     color: var(--app-color);
   }
 
@@ -427,6 +465,11 @@
     .app-topbar-brand-name {
       display: none;
     }
+
+    /* With brand-name hidden, the divider bar is pointless chrome — drop it. */
+    .app-topbar-brand::after {
+      display: none;
+    }
   }
 
   .app-header details.dropdown[open] > summary::before {