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.

templates/collection_modal.templ

@@ -1,9 +1,9 @@
 package templates
 
 templ CollectionModal(collection CollectionData) {
-	<div x-data="collections" class="fixed inset-0 z-[65] flex items-center justify-center p-4" style="background-color: var(--surface-overlay);">
-		<div class="card p-6 w-full max-w-md" style="box-shadow: var(--shadow-pop);">
-			<div class="flex justify-between items-center mb-6">
+	<div x-data="collections" class="fixed inset-0 z-[65] flex items-stretch justify-end sm:items-center sm:justify-center sm:p-4" style="background-color: var(--surface-overlay);">
+		<div class="app-modal-panel card p-5 sm:p-6 sm:max-w-md">
+			<div class="sticky top-0 z-10 flex justify-between items-center -mx-5 px-5 pb-3 mb-5 border-b sm:-mx-6 sm:px-6" style="background-color: var(--bg-secondary); border-color: var(--border);">
 				<div class="flex items-center gap-3">
 					<span class="grid place-items-center h-10 w-10 rounded-xl shrink-0" style="background-color: var(--accent-muted); color: var(--accent);">
 						@Icon("folder", "h-5 w-5")
@@ -85,7 +85,7 @@ templ CollectionModal(collection CollectionData) {
 							</label>
 						</div>
 					</div>
-					<div class="flex justify-end space-x-3">
+					<div class="sticky bottom-0 z-10 flex justify-end space-x-3 -mx-5 px-5 py-3 border-t sm:-mx-6 sm:px-6" style="background-color: var(--bg-secondary); border-color: var(--border);">
 						<button type="button" @click="closeCollectionModal($el)" class="btn btn-secondary">Cancel</button>
 						<button type="submit" class="btn btn-primary">Update Collection</button>
 					</div>
@@ -185,7 +185,7 @@ templ CollectionModal(collection CollectionData) {
 						</div>
 						<input type="hidden" name="color" id="collection-color" value="blue"/>
 					</div>
-					<div class="flex justify-end space-x-3">
+					<div class="sticky bottom-0 z-10 flex justify-end space-x-3 -mx-5 px-5 py-3 border-t sm:-mx-6 sm:px-6" style="background-color: var(--bg-secondary); border-color: var(--border);">
 						<button type="button" @click="closeCollectionModal($el)" class="btn btn-secondary">Cancel</button>
 						<button type="submit" class="btn btn-primary">Create Collection</button>
 					</div>