fix(ui): right slide-out sheet for oversized modals on phones; 360px fixes

Auditing at 360x760 (Firefox's smallest emulated device; Galaxy S25
class) — 390 was too generous a baseline — the Customize Dashboard
pop-up was the worst page in the app: its card measured 986px in a
760px viewport with no internal scroll, so Cancel/Save sat ~90px below
the fold on a fixed, non-scrolling overlay — unreachable.

New reusable shell: .app-modal-panel (input.css) renders a centered
dialog on desktop (>=640px, unchanged) and a full-height right
slide-out sheet on phones: h-dvh, rounded-l-2xl, slide-in animation
(replays on every open because the overlay toggles display), internal
scroll, overscroll containment. Overlay pairs with items-stretch /
justify-end below sm.

Converted the measured overflows:
- Customize Dashboard (986px): sheet + sticky header/footer, rows wrap
  with the Restore/toggle group right-aligned (ml-auto), titles
  truncate, System badge shrink-0.
- Collection create/edit (796px, cut at both ends at 360): sheet +
  sticky header/footer; edit modal shared the file.

Also at 360: admin-library's Archived buttons row (View Archived +
Purge Archived Now, 315px at x=49) inflated the page to 364px — now
flex-wrap. Collection-episodes shows a 1px sub-pixel rounding artifact
(vw=361) — left as-is, invisible.

Verified at 360x760: sheet geometry (footer bottom 739 < 760), rows
fit, desktop 1280 screenshot unchanged; full-route sweep at 360 shows
no page-level horizontal overflow beyond the two notes above.

web/static/input.css

@@ -618,6 +618,15 @@
   }
 }
 
+@keyframes app-sheet-in {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
 @layer components {
   /* ---------- Surfaces ---------- */
 
@@ -628,6 +637,28 @@
     box-shadow: var(--shadow-card);
   }
 
+  /* ---------- Modal shell ---------- */
+
+  /* Reusable oversized-pop-up shell (.app-modal-panel): centered dialog on
+     desktop (>=640px), full-height right slide-out sheet on phones. Pair
+     with an overlay of `flex items-stretch justify-end sm:items-center
+     sm:justify-center sm:p-4`. The slide-in animation replays on every
+     open because the overlay toggles display none -> flex. Long content
+     scrolls inside the panel; give the header/footer `sticky` + the card
+     background so actions stay reachable. */
+  .app-modal-panel {
+    @apply w-full h-dvh overflow-y-auto overscroll-contain rounded-l-2xl;
+    box-shadow: var(--shadow-pop);
+    animation: app-sheet-in 240ms cubic-bezier(0.32, 0.72, 0, 1);
+  }
+
+  @media (min-width: 640px) {
+    .app-modal-panel {
+      @apply h-auto max-h-[calc(100vh-2rem)] rounded-2xl;
+      animation: none;
+    }
+  }
+
   /* ---------- Buttons ---------- */
 
   .btn {