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

Fix Builder layout and Loading... initialization bug

Browse Source 
Layout: replace admin-container wrapper with #builder-page flex column;
add min-height:0 to builder-wrap, builder-body, both panels so the
inner scroll areas actually shrink correctly in a flex column.

Loading...: scripts at end of body mean DOMContentLoaded may have
already fired by the time the listener is registered. Check
document.readyState first and call init() directly if DOM is ready.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Philip Guzman III
2026-05-13 19:26:26 -07:00
parent 21e856f250
commit b894e22bdc
3 changed files with 27 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
admin/builder.php
+4 -4
View File
@@ -72,11 +72,11 @@ $page_title = $session ? 'Edit: ' . htmlspecialchars($session['name']) : 'Rosary
<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">
</head> </head>
<body style="overflow:hidden"> <body>
<div class="admin-container" style="max-width:100%;padding:0"> <div id="builder-page">
<header class="admin-header" style="position:sticky;top:0;z-index:100;padding:0 24px;height:64px"> <header class="admin-header" style="flex-shrink:0;padding:0 24px">
<h1 style="font-size:1rem">&#x271D; <?= htmlspecialchars($site_name) ?></h1> <h1 style="font-size:1rem">&#x271D; <?= htmlspecialchars($site_name) ?></h1>
<div class="header-actions"> <div class="header-actions">
<a href="<?= BASE_URL ?>/" class="btn btn-ghost" style="font-size:12px">&#x2190; View Site</a> <a href="<?= BASE_URL ?>/" class="btn btn-ghost" style="font-size:12px">&#x2190; View Site</a>
@@ -180,7 +180,7 @@ $page_title = $session ? 'Edit: ' . htmlspecialchars($session['name']) : 'Rosary
</div><!-- /builder-body --> </div><!-- /builder-body -->
</div><!-- /builder-wrap --> </div><!-- /builder-wrap -->
</div><!-- /admin-container --> </div><!-- /builder-page -->
<!-- ── Create / Edit Prayer Modal ─────────────────────────────── --> <!-- ── Create / Edit Prayer Modal ─────────────────────────────── -->
assets/css/builder.css
+13 -1
View File
@@ -5,10 +5,19 @@
/* ── Page layout ─────────────────────────────────────────────── */ /* ── Page layout ─────────────────────────────────────────────── */
#builder-page {
display: flex;
flex-direction: column;
height: 100vh;
overflow: hidden;
}
.builder-wrap { .builder-wrap {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: calc(100vh - 64px); /* below fixed admin header */ flex: 1;
min-height: 0; /* lets children shrink below their content height */
overflow: hidden;
} }
.builder-toolbar { .builder-toolbar {
@@ -131,6 +140,7 @@
display: grid; display: grid;
grid-template-columns: 380px 1fr; grid-template-columns: 380px 1fr;
flex: 1; flex: 1;
min-height: 0; /* required — without this the grid doesn't shrink in a flex column */
overflow: hidden; overflow: hidden;
} }
@@ -140,6 +150,7 @@
border-right: 1px solid var(--border); border-right: 1px solid var(--border);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-height: 0;
overflow: hidden; overflow: hidden;
background: var(--bg); background: var(--bg);
} }
@@ -294,6 +305,7 @@
.builder-library { .builder-library {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-height: 0;
overflow: hidden; overflow: hidden;
background: var(--bg); background: var(--bg);
} }
assets/js/builder.js
+10 -2
View File
@@ -17,7 +17,7 @@
/* ───────────────────────────────────────────────────────── /* ─────────────────────────────────────────────────────────
Boot Boot
───────────────────────────────────────────────────────── */ ───────────────────────────────────────────────────────── */
document.addEventListener('DOMContentLoaded', function () { function init() {
PRAYERS = window.PRAYERS_DATA || []; PRAYERS = window.PRAYERS_DATA || [];
// Populate existing steps when editing a session // Populate existing steps when editing a session
@@ -31,7 +31,15 @@
renderLibrary(); renderLibrary();
renderSequence(); renderSequence();
bindEvents(); bindEvents();
}); }
// Scripts are at end of body — DOM is fully parsed by the time this runs,
// so DOMContentLoaded may have already fired. Check readyState first.
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', init);
} else {
init();
}
/* ───────────────────────────────────────────────────────── /* ─────────────────────────────────────────────────────────
Event bindings Event bindings