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/dashboard.templ

@@ -220,11 +220,11 @@ templ BookCard(item handlers.BookInfo) {
 templ DashboardSettingsModal(sections []handlers.SectionData, hiddenCollections []string, itemsPerSection int) {
 	<div
 		id="dashboard-settings-modal"
-		class="hidden fixed inset-0 z-[70] flex items-center justify-center p-4"
+		class="hidden fixed inset-0 z-[70] flex items-stretch justify-end sm:items-center sm:justify-center sm:p-4"
 		style="background-color: var(--surface-overlay);"
 	>
-		<div class="card p-6 w-full max-w-2xl shadow-2xl" style="box-shadow: var(--shadow-pop);">
-			<div class="flex justify-between items-center mb-6">
+		<div class="app-modal-panel card p-5 sm:p-6 sm:max-w-2xl">
+			<div class="sticky top-0 z-10 flex justify-between items-start mb-6 pb-2" style="background-color: var(--bg-secondary);">
 				<div>
 					<h2 class="text-xl font-bold" style="color: var(--text-primary)">Customize Dashboard</h2>
 					<p class="text-sm mt-1" style="color: var(--text-secondary)">Drag to reorder, toggle to show or hide.</p>
@@ -237,22 +237,22 @@ templ DashboardSettingsModal(sections []handlers.SectionData, hiddenCollections
 			<div id="collection-list" class="space-y-2 mb-6">
 				for _, section := range sections {
 					<div
-						class="collection-item flex items-center justify-between p-3 rounded-xl cursor-move select-none card"
+						class="collection-item flex flex-wrap items-center justify-between gap-x-3 gap-y-2 p-3 rounded-xl cursor-move select-none card"
 						data-collection-id={ section.ID }
 						data-is-system={ fmt.Sprintf("%v", section.IsSystem) }
 						draggable="true"
 					>
-						<div class="flex items-center gap-3">
+						<div class="flex items-center gap-3 min-w-0">
 							@Icon("grip", "h-5 w-5 shrink-0")
-							<span class="text-xl">{ section.Icon }</span>
-							<div class="flex items-center gap-2">
-								<span class="font-medium" style="color: var(--text-primary)">{ section.Title }</span>
+							<span class="text-xl shrink-0">{ section.Icon }</span>
+							<div class="flex items-center gap-2 min-w-0">
+								<span class="font-medium truncate" style="color: var(--text-primary)">{ section.Title }</span>
 								if section.IsSystem {
-									<span class="badge" style="background-color: var(--accent-muted); color: var(--accent);">System</span>
+									<span class="badge shrink-0" style="background-color: var(--accent-muted); color: var(--accent);">System</span>
 								}
 							</div>
 						</div>
-						<div class="flex items-center gap-3">
+						<div class="flex items-center gap-3 shrink-0 ml-auto">
 							if section.IsSystem {
 								<button
 									data-action="restore-system-collection"
@@ -296,7 +296,7 @@ templ DashboardSettingsModal(sections []handlers.SectionData, hiddenCollections
 					target="items-count-display"
 				/>
 			</div>
-			<div class="flex justify-end gap-3">
+			<div class="sticky bottom-0 z-10 flex justify-end gap-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 data-action="close-dashboard-settings" class="btn btn-secondary">Cancel</button>
 				<button data-action="save-dashboard-settings" class="btn btn-primary">Save Changes</button>
 			</div>