refined UI.

app.py

@@ -350,6 +350,9 @@ def build_head ():
 		# the mount/bridge script that wires it to the hidden #ls-editor-state textbox.
 		os.path.join(vendor, 'lyl-editor.bundle.js'),
 		os.path.join(WEB_DIR, 'lyl-editor-mount.js'),
+		# computes --ls-fill-h so the bottom Score List | editor row fills the height
+		# left under Compose + Logs (robust against Gradio's flex-nesting quirks).
+		os.path.join(WEB_DIR, 'layout-fit.js'),
 	]
 	tags = ['<script>window.__LILYSCRIPT_SOUNDFONT_URL=%r;window.__LILYSCRIPT_FLUID_URL=%r;</script>'
 		% (_file_url(os.path.join(WEB_DIR, 'soundfont')) + '/',
@@ -439,10 +442,9 @@ CUSTOM_CSS = '''
 	white-space: normal;
 	word-break: break-all;
 }
-/* Score List: fixed height with an auto scrollbar, matching the editor's
-   18-line viewport (gr.Code lines=18 ≈ 266px). */
+/* Score List scrolls within the height its column is given (see the layout model
+   at the bottom of this stylesheet). */
 .score-list {
-	max-height: 324px;
 	overflow-y: auto;
 }
 /* Generate button turns yellow while a generation is running (the .ls-generating
@@ -464,6 +466,107 @@ CUSTOM_CSS = '''
 #stop-btn.ls-generating:hover {
 	background: #cf2e2e !important;
 }
+
+/* ---- Layout: viewport-locked two-column workspace ----------------------------
+   Goal: Compose + Logs keep their natural height; the Score List | editor row fills
+   the rest; a long score must NOT stretch the page (it scrolls inside the sheet
+   panel instead). Gradio's deep wrapper nesting makes pure-CSS flex height
+   propagation unreliable, so the panel heights are driven by a small ResizeObserver
+   in web/layout-fit.js (sets --ls-fill-h on :root = viewport − the panels above the
+   fill row). These rules consume that variable. */
+#main-row {
+	align-items: flex-start;    /* don't stretch columns to each other's height */
+}
+/* Right (Sheet music) column: the score preview scrolls inside a viewport-capped
+   height instead of growing the row. */
+#sheet-col {
+	position: sticky;
+	top: 8px;
+}
+#sheet-col .ls-score-root {
+	height: calc(100vh - 110px);
+	min-height: 320px;
+}
+#sheet-col .ls-preview {
+	overflow: auto;             /* the SVG scrolls here, not the page */
+}
+
+/* Left column stacks naturally: Compose, Logs, then the fill row. */
+#compose-col {
+	display: flex;
+	flex-direction: column;
+}
+/* The bottom Score List | editor row gets the height left under Compose + Logs,
+   computed by layout-fit.js into --ls-fill-h (with a sane fallback + floor). */
+#compose-col > .lp-fill {
+	height: var(--ls-fill-h, 420px);
+	min-height: 360px;
+}
+#compose-col > .lp-fill > .column,
+#compose-col > .lp-fill > .column > .gr-group,
+#compose-col > .lp-fill > .column > .gr-group > .gr-group {
+	height: 100%;
+	min-height: 0;
+	display: flex;
+	flex-direction: column;
+}
+/* Score-list column: the "## Score List" header (a .prose block) stays natural at
+   the top; the radio list scrolls in the remaining space. The header block sits in
+   the inner group alongside the radio, so pin it 0-shrink and let the list fill. */
+#compose-col > .lp-fill > .column:first-child .block:has(.prose) {
+	flex: 0 0 auto;
+}
+#compose-col > .lp-fill > .column:first-child .block:has(.score-list) {
+	flex: 1 1 0;
+	min-height: 0;
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+}
+#compose-col > .lp-fill > .column:first-child .score-list {
+	flex: 1 1 auto;
+	min-height: 0;
+}
+/* Logs textbox stays compact even on long output. */
+#compose-col > .lp-fixed.gr-accordion textarea {
+	max-height: 200px;
+}
+/* Editor column: the embedded CodeMirror mount fills the space under its header.
+   DOM (Gradio): #editor-col > .gr-group > .gr-group > .styler > { headerBlock,
+   editorBlock(.html-container > .gradio-style > #ls-editor-mount), hiddenStateBlock }.
+   We make the chain down to .styler full-height flex columns, let the editor block
+   fill (flex:1, basis 0 so a long score can't inflate it), and keep the header
+   block natural. CM then scrolls inside the bounded mount. */
+#editor-col,
+#editor-col > .gr-group,
+#editor-col > .gr-group > .gr-group,
+#editor-col .styler {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	min-height: 0;
+}
+/* the editor block (the one wrapping the gr.HTML mount) fills the styler height */
+#editor-col .styler > .block:has(.html-container) {
+	flex: 1 1 0;
+	min-height: 0;
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+}
+#editor-col .html-container,
+#editor-col .html-container > .gradio-style {
+	flex: 1 1 0;
+	min-height: 0;
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+}
+#editor-col #ls-editor-mount {
+	flex: 1 1 0;
+	height: auto;              /* override lyl-editor.css fixed 470px */
+	min-height: 0;
+}
 '''
 
 
@@ -474,11 +577,11 @@ def build_ui ():
 		gr.Markdown('## 🎼 LilyScript — symbolic music generation with Lilylet')
 		store = gr.State(examples)
 
-		with gr.Row(equal_height=True):
+		with gr.Row(elem_id='main-row'):
 			# ---------------- LEFT ----------------
-			with gr.Column(scale=5):
+			with gr.Column(scale=5, elem_id='compose-col'):
 				# (1) compose params, with (2) the collapsible run log stacked below
-				with gr.Group():
+				with gr.Group(elem_classes=['lp-fixed']):
 					gr.Markdown('## Compose')
 					with gr.Group():
 						gr.Markdown('- Style Options')
@@ -503,19 +606,19 @@ def build_ui ():
 						gen_btn = gr.Button('Generate', variant='primary', elem_id='gen-btn')
 						stop_btn = gr.Button('Stop', variant='stop', elem_id='stop-btn')
 
-				with gr.Accordion('Logs', open=True):
+				with gr.Accordion('Logs', open=True, elem_classes=['lp-fixed']):
 					log = gr.Textbox(show_label=False, lines=10, max_lines=10,
 						autoscroll=True, interactive=False, container=False)
 
-				# bottom row: (3) file list | (4) editor
-				with gr.Row(equal_height=True):
+				# bottom row: (3) file list | (4) editor — flex-fills the remaining height
+				with gr.Row(equal_height=True, elem_classes=['lp-fill']):
 					with gr.Column(scale=2, min_width=160):
 						with gr.Group():
 							gr.Markdown('## Score List')
 							file_list = gr.Radio(show_label=False, choices=list(examples.keys()),
 								value=None, interactive=True, container=False,
 								elem_classes=['score-list'])
-					with gr.Column(scale=5):
+					with gr.Column(scale=5, elem_id='editor-col'):
 						with gr.Group():
 							gr.Markdown('## Lilylet editor')
 							# Our own CodeMirror 6 editor (lyl-editor.bundle.js) mounts into
@@ -532,7 +635,7 @@ def build_ui ():
 								elem_classes=['ls-editor-state-hidden'], show_label=False, container=False)
 
 			# ---------------- RIGHT ----------------
-			with gr.Column(scale=6):
+			with gr.Column(scale=6, elem_id='sheet-col'):
 				with gr.Group():
 					gr.Markdown('## Sheet music')
 					gr.HTML(SHEET_PLACEHOLDER)

web/layout-fit.js

@@ -0,0 +1,65 @@
+/* LilyScript layout fitter.
+ *
+ * Gradio's deep wrapper nesting makes pure-CSS flex height propagation unreliable
+ * (a long score in the right panel, or the editor's own content, can blow out the
+ * left column). So we compute the height available to the bottom "Score List |
+ * editor" row in JS and expose it as the CSS variable --ls-fill-h on :root.
+ *
+ *   --ls-fill-h = viewport_height - fillRow.top - bottom_gap
+ *
+ * i.e. the fill row gets exactly the space left under Compose + Logs, down to the
+ * bottom of the viewport. score-player.css / app.py consume the variable. We
+ * recompute on resize and whenever the left column's size changes (Logs expanding,
+ * accordion toggle, fonts loading) via a ResizeObserver.
+ */
+(function () {
+	'use strict';
+
+	var BOTTOM_GAP = 16;     // breathing room below the fill row
+	var MIN_FILL = 360;      // never collapse the editor/score-list below this
+
+	function fillEl () {
+		var col = document.getElementById('compose-col');
+		return col ? col.querySelector(':scope > .lp-fill') : null;
+	}
+
+	function recompute () {
+		var fill = fillEl();
+		if (!fill) return;
+		var top = fill.getBoundingClientRect().top;           // viewport-relative
+		var avail = window.innerHeight - top - BOTTOM_GAP;
+		if (avail < MIN_FILL) avail = MIN_FILL;
+		document.documentElement.style.setProperty('--ls-fill-h', avail + 'px');
+	}
+
+	var raf = null;
+	function schedule () {
+		if (raf) return;
+		raf = requestAnimationFrame(function () { raf = null; recompute(); });
+	}
+
+	function boot () {
+		recompute();
+		window.addEventListener('resize', schedule);
+		// observe the left column so Logs growth / accordion toggles re-fit
+		var col = document.getElementById('compose-col');
+		if (col && window.ResizeObserver) {
+			var ro = new ResizeObserver(schedule);
+			ro.observe(col);
+			// also observe the two fixed blocks directly (their height drives fill.top)
+			var fixed = col.querySelectorAll(':scope > .lp-fixed');
+			for (var i = 0; i < fixed.length; i++) ro.observe(fixed[i]);
+		}
+		// Gradio mounts asynchronously; retry a few times until #compose-col exists.
+		if (!col) setTimeout(boot, 300);
+	}
+
+	if (document.readyState === 'loading') {
+		document.addEventListener('DOMContentLoaded', boot);
+	} else {
+		boot();
+	}
+	// a late pass after fonts/score player settle
+	setTimeout(recompute, 1200);
+	console.log('[layout-fit] loaded');
+})();