From 7d4c71539a35d216cc7a5c1b2c1f9bcad749e7ba Mon Sep 17 00:00:00 2001
From: Jens Mohrmann <mail@jensmohrmann.de>
Date: Mon, 14 Sep 2026 02:13:08 +0200
Subject: [PATCH] Live-note staff: 64px box aligned with mic button, extreme
 ledger lines overflow instead of clipping

---
 src/App.css                      |  5 +++++
 src/components/LiveNoteStaff.tsx | 12 +++++++-----
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/App.css b/src/App.css
index cab5af6..cc43cf1 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1104,8 +1104,13 @@ button {
     opacity: 0.9;
 }
 
+.live-note-staff {
+    height: 64px; /* matches the mic button — vertical centering via the bar's align-items */
+}
+
 .live-note-staff svg {
     display: block; /* inline SVG baseline gap made the box taller than the SVG */
+    overflow: visible; /* extreme ledger lines overlap neighbors instead of adding whitespace */
 }
 
 /* Zen mode: center the core UI vertically; the exit button is position:fixed
diff --git a/src/components/LiveNoteStaff.tsx b/src/components/LiveNoteStaff.tsx
index da96f92..6d9187b 100644
--- a/src/components/LiveNoteStaff.tsx
+++ b/src/components/LiveNoteStaff.tsx
@@ -42,10 +42,12 @@ export const LiveNoteStaff: React.FC<LiveNoteStaffProps> = ({
         container.innerHTML = '';
 
         const renderer = new Renderer(container, Renderer.Backends.SVG);
-        // Enough headroom for the instrument's written range: guitar first
-        // position reaches written E3 — about four ledger lines BELOW the
-        // treble staff. A 74px box clipped those (half-invisible staff).
-        renderer.resize(width, 112);
+        // Match the mic button height (64px) so the staff is vertically
+        // aligned with it. The stave is centered in the box; extreme ledger
+        // lines (very high/low notes) intentionally OVERFLOW the box
+        // (CSS overflow: visible) and may overlap neighboring elements —
+        // preferred over reserving large empty headroom.
+        renderer.resize(width, 64);
         const context = renderer.getContext();
 
         const resolvedColor =
@@ -55,7 +57,7 @@ export const LiveNoteStaff: React.FC<LiveNoteStaffProps> = ({
         context.setFillStyle(resolvedColor);
         context.setStrokeStyle(resolvedColor);
 
-        const stave = new Stave(0, 28, width - 2);
+        const stave = new Stave(0, 13, width - 2);
         stave.setDefaultLedgerLineStyle({ strokeStyle: resolvedColor, lineWidth: 2 });
         stave.addClef(clef);
         if (keySignature) stave.addKeySignature(keySignature);