From 04e855e69100d0f7ca763ccd17a3764e676c28b3 Mon Sep 17 00:00:00 2001 From: John O'Keefe Date: Mon, 2 Nov 2026 10:55:23 -0500 Subject: [PATCH] fix(ui): right slide-out sheet for oversized modals on phones; 360px fixes MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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/admin_library.templ | 2 +- templates/admin_library_templ.go | 2 +- templates/collection_modal.templ | 10 +++++----- templates/collection_modal_templ.go | 6 +++--- templates/dashboard.templ | 22 ++++++++++---------- templates/dashboard_templ.go | 20 +++++++++---------- web/static/input.css | 31 +++++++++++++++++++++++++++++ 7 files changed, 62 insertions(+), 31 deletions(-) diff --git a/templates/admin_library.templ b/templates/admin_library.templ index 100b0b27..8ca5ce1d 100644 --- a/templates/admin_library.templ +++ b/templates/admin_library.templ @@ -49,7 +49,7 @@ templ AdminLibrary(user User, libraries []LibraryData, users []User, archivedCou unless purged; items return automatically if their files come back.

-
+
View Archived
View Archived
View Archived
@@ -185,7 +185,7 @@ templ CollectionModal(collection CollectionData) {
-
+
diff --git a/templates/collection_modal_templ.go b/templates/collection_modal_templ.go index 710f2b91..5851bcff 100644 --- a/templates/collection_modal_templ.go +++ b/templates/collection_modal_templ.go @@ -29,7 +29,7 @@ func CollectionModal(collection CollectionData) templ.Component { templ_7745c5c3_Var1 = templ.NopComponent } ctx = templ.ClearChildren(ctx) - templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "
") + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "
") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } @@ -163,7 +163,7 @@ func CollectionModal(collection CollectionData) templ.Component { return templ_7745c5c3_Err } } - templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, " class=\"h-4 w-4 accent-current\"> Show Up Next strip
") + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, " class=\"h-4 w-4 accent-current\"> Show Up Next strip
") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } @@ -181,7 +181,7 @@ func CollectionModal(collection CollectionData) templ.Component { if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } - templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, "\">
") + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, "\">
") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } diff --git a/templates/dashboard.templ b/templates/dashboard.templ index b9cf1279..72b260cb 100644 --- a/templates/dashboard.templ +++ b/templates/dashboard.templ @@ -220,11 +220,11 @@ templ BookCard(item handlers.BookInfo) { templ DashboardSettingsModal(sections []handlers.SectionData, hiddenCollections []string, itemsPerSection int) {