pguzman/Rosary
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix zoomed photo preview overflowing its box; cache-bust crop assets

Browse Source 
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 <script>/<link> tags, so a browser that loaded a page before this
feature's most recent update could easily keep serving a stale cached
copy indefinitely — added ?v=2 to force a refetch of this round's fix.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Philip Guzman III
2026-09-16 11:03:54 -07:00
parent d1615a9e01
commit c20078890e
5 changed files with 10 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
admin/builder.php
+2 -2
View File
@@ -74,7 +74,7 @@ $page_title = $session ? 'Edit: ' . htmlspecialchars($session['name']) : 'Rosary
<title><?= $page_title ?> — <?= htmlspecialchars($site_name) ?></title> <title><?= $page_title ?> — <?= htmlspecialchars($site_name) ?></title>
<link rel="stylesheet" href="<?= BASE_URL ?>/assets/css/setup.css"> <link rel="stylesheet" href="<?= BASE_URL ?>/assets/css/setup.css">
<link rel="stylesheet" href="<?= BASE_URL ?>/assets/css/builder.css?v=1"> <link rel="stylesheet" href="<?= BASE_URL ?>/assets/css/builder.css?v=1">
<link rel="stylesheet" href="<?= BASE_URL ?>/assets/css/photo-crop.css"> <link rel="stylesheet" href="<?= BASE_URL ?>/assets/css/photo-crop.css?v=2">
<meta name="csrf-token" content="<?= htmlspecialchars(csrf_token()) ?>"> <meta name="csrf-token" content="<?= htmlspecialchars(csrf_token()) ?>">
</head> </head>
<body> <body>
@@ -308,7 +308,7 @@ var EXISTING_STEPS = <?= json_encode(array_map(fn($s) => [
'attribution' => $s['attribution'] ?? 'leader_all', 'attribution' => $s['attribution'] ?? 'leader_all',
], $edit_steps)) ?>; ], $edit_steps)) ?>;
</script> </script>
<script src="<?= BASE_URL ?>/assets/js/photo-crop.js"></script> <script src="<?= BASE_URL ?>/assets/js/photo-crop.js?v=2"></script>
<script src="<?= BASE_URL ?>/assets/js/builder.js?v=1"></script> <script src="<?= BASE_URL ?>/assets/js/builder.js?v=1"></script>
</body> </body>
</html> </html>
admin/novena_group.php
+2 -2
View File
@@ -137,7 +137,7 @@ $mystery_labels = [
<link rel="icon" type="image/svg+xml" href="<?= BASE_URL ?>/favicon.svg"> <link rel="icon" type="image/svg+xml" href="<?= BASE_URL ?>/favicon.svg">
<title><?= htmlspecialchars($group['name']) ?> — <?= htmlspecialchars($site_name) ?></title> <title><?= htmlspecialchars($group['name']) ?> — <?= htmlspecialchars($site_name) ?></title>
<link rel="stylesheet" href="<?= BASE_URL ?>/assets/css/setup.css"> <link rel="stylesheet" href="<?= BASE_URL ?>/assets/css/setup.css">
<link rel="stylesheet" href="<?= BASE_URL ?>/assets/css/photo-crop.css"> <link rel="stylesheet" href="<?= BASE_URL ?>/assets/css/photo-crop.css?v=2">
<meta name="csrf-token" content="<?= htmlspecialchars(csrf_token()) ?>"> <meta name="csrf-token" content="<?= htmlspecialchars(csrf_token()) ?>">
<script>var BASE_URL = '<?= BASE_URL ?>';</script> <script>var BASE_URL = '<?= BASE_URL ?>';</script>
</head> </head>
@@ -324,7 +324,7 @@ $mystery_labels = [
</main> </main>
</div> </div>
<script src="<?= BASE_URL ?>/assets/js/photo-crop.js"></script> <script src="<?= BASE_URL ?>/assets/js/photo-crop.js?v=2"></script>
<script> <script>
(function () { (function () {
var fileInput = document.getElementById('photo-file'); var fileInput = document.getElementById('photo-file');
admin/setup.php
+2 -2
View File
@@ -48,7 +48,7 @@ $page_title = $session ? 'Edit Session' : 'New Session';
<link rel="icon" type="image/svg+xml" href="<?= BASE_URL ?>/favicon.svg"> <link rel="icon" type="image/svg+xml" href="<?= BASE_URL ?>/favicon.svg">
<title><?= $page_title ?> — <?= htmlspecialchars($site_name) ?></title> <title><?= $page_title ?> — <?= htmlspecialchars($site_name) ?></title>
<link rel="stylesheet" href="<?= BASE_URL ?>/assets/css/setup.css"> <link rel="stylesheet" href="<?= BASE_URL ?>/assets/css/setup.css">
<link rel="stylesheet" href="<?= BASE_URL ?>/assets/css/photo-crop.css"> <link rel="stylesheet" href="<?= BASE_URL ?>/assets/css/photo-crop.css?v=2">
<meta name="csrf-token" content="<?= htmlspecialchars(csrf_token()) ?>"> <meta name="csrf-token" content="<?= htmlspecialchars(csrf_token()) ?>">
<script>var BASE_URL = '<?= BASE_URL ?>';</script> <script>var BASE_URL = '<?= BASE_URL ?>';</script>
</head> </head>
@@ -259,7 +259,7 @@ $page_title = $session ? 'Edit Session' : 'New Session';
</main> </main>
</div> </div>
<script src="<?= BASE_URL ?>/assets/js/photo-crop.js"></script> <script src="<?= BASE_URL ?>/assets/js/photo-crop.js?v=2"></script>
<script src="<?= BASE_URL ?>/assets/js/setup.js?v=5"></script> <script src="<?= BASE_URL ?>/assets/js/setup.js?v=5"></script>
</body> </body>
</html> </html>
assets/css/public.css
+2
View File
@@ -333,6 +333,8 @@ body {
.novena-hero-photo-wrap { .novena-hero-photo-wrap {
flex-shrink: 0; flex-shrink: 0;
overflow: hidden;
border-radius: 50%;
} }
.novena-hero-photo { .novena-hero-photo {
assets/css/setup.css
+2
View File
@@ -441,6 +441,8 @@ input:focus, select:focus {
---------------------------------------------------------------- */ ---------------------------------------------------------------- */
.photo-preview-wrap { .photo-preview-wrap {
margin-bottom: 8px; margin-bottom: 8px;
overflow: hidden;
border-radius: 6px;
} }
.photo-preview { .photo-preview {
max-height: 120px; max-height: 120px;