Live-note staff: 64px box aligned with mic button, extreme ledger lines overflow instead of clipping

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

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
+        // Match the mic button height (64px) so the staff is vertically
-        // position reaches written E3 — about four ledger lines BELOW the
+        // aligned with it. The stave is centered in the box; extreme ledger
-        // treble staff. A 74px box clipped those (half-invisible staff).
+        // lines (very high/low notes) intentionally OVERFLOW the box
-        renderer.resize(width, 112);
+        // (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);