From c20078890e2bdf6ad4779d9b1611f2c6c605050d Mon Sep 17 00:00:00 2001 From: Philip Guzman III Date: Wed, 16 Sep 2026 11:03:54 -0700 Subject: [PATCH] Fix zoomed photo preview overflowing its box; cache-bust crop assets MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Reported: on the session edit page, the photo preview rendered larger than the rest of the form and overlapped the upload button below it. Cause: transform:scale(zoom) only affects paint, not layout — the preview's wrapper (.photo-preview-wrap, .novena-hero-photo-wrap) never had overflow:hidden, so a zoomed-in crop visually spilled outside its intended max-height/max-width box instead of being clipped to it. Cards elsewhere were already fine (.rosary-card already has overflow:hidden). Also: photo-crop.js/css had no cache-busting query string on any of their three - + diff --git a/admin/novena_group.php b/admin/novena_group.php index da552f0..dfbead4 100644 --- a/admin/novena_group.php +++ b/admin/novena_group.php @@ -137,7 +137,7 @@ $mystery_labels = [ <?= htmlspecialchars($group['name']) ?> — <?= htmlspecialchars($site_name) ?> - + @@ -324,7 +324,7 @@ $mystery_labels = [ - + @@ -259,7 +259,7 @@ $page_title = $session ? 'Edit Session' : 'New Session'; - + diff --git a/assets/css/public.css b/assets/css/public.css index 12b1de8..16be393 100644 --- a/assets/css/public.css +++ b/assets/css/public.css @@ -333,6 +333,8 @@ body { .novena-hero-photo-wrap { flex-shrink: 0; + overflow: hidden; + border-radius: 50%; } .novena-hero-photo { diff --git a/assets/css/setup.css b/assets/css/setup.css index e934a9e..2f18a05 100644 --- a/assets/css/setup.css +++ b/assets/css/setup.css @@ -441,6 +441,8 @@ input:focus, select:focus { ---------------------------------------------------------------- */ .photo-preview-wrap { margin-bottom: 8px; + overflow: hidden; + border-radius: 6px; } .photo-preview { max-height: 120px;