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.
This commit is contained in:
1 parent
3e8ac3b9b7
commit
04e855e691
7 files changed
+62
-31
No files matched your search
@@ -95,7 +95,7 @@ func AdminLibrary(user User, libraries []LibraryData, users []User, archivedCoun
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "</a></p><p class=\"text-sm\" style=\"color: var(--text-secondary)\">Files missing from disk for two consecutive scans. Reading history is kept unless purged; items return automatically if their files come back.</p></div><div class=\"flex items-center gap-2\"><a href=\"/admin/archived\" class=\"btn btn-secondary\">View Archived</a> <button type=\"button\" @click=\"purgeArchivedItems()\" class=\"btn btn-secondary\">")
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "</a></p><p class=\"text-sm\" style=\"color: var(--text-secondary)\">Files missing from disk for two consecutive scans. Reading history is kept unless purged; items return automatically if their files come back.</p></div><div class=\"flex flex-wrap items-center gap-2\"><a href=\"/admin/archived\" class=\"btn btn-secondary\">View Archived</a> <button type=\"button\" @click=\"purgeArchivedItems()\" class=\"btn btn-secondary\">")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user