Fix live-note staff clipping (written-range headroom, block SVG) and center Zen-mode content vertically

This commit is contained in:
2026-09-14 02:11:14 +02:00
parent fff512b4dd
commit 9fb3f91b92
2 changed files with 24 additions and 2 deletions

View File

@@ -1103,3 +1103,21 @@ button {
flex: none;
opacity: 0.9;
}
.live-note-staff svg {
display: block; /* inline SVG baseline gap made the box taller than the SVG */
}
/* Zen mode: center the core UI vertically; the exit button is position:fixed
and stays at the top. `safe center` avoids clipping when content is taller
than the viewport. */
.app-container.zen-mode {
display: flex;
flex-direction: column;
}
.app-container.zen-mode .main-stage {
flex: 1;
justify-content: safe center;
justify-content: center;
}

View File

@@ -42,7 +42,10 @@ export const LiveNoteStaff: React.FC<LiveNoteStaffProps> = ({
container.innerHTML = '';
const renderer = new Renderer(container, Renderer.Backends.SVG);
renderer.resize(width, 74);
// 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);
const context = renderer.getContext();
const resolvedColor =
@@ -52,7 +55,7 @@ export const LiveNoteStaff: React.FC<LiveNoteStaffProps> = ({
context.setFillStyle(resolvedColor);
context.setStrokeStyle(resolvedColor);
const stave = new Stave(0, 10, width - 2);
const stave = new Stave(0, 28, width - 2);
stave.setDefaultLedgerLineStyle({ strokeStyle: resolvedColor, lineWidth: 2 });
stave.addClef(clef);
if (keySignature) stave.addKeySignature(keySignature);
@@ -81,6 +84,7 @@ export const LiveNoteStaff: React.FC<LiveNoteStaffProps> = ({
ref={containerRef}
className="live-note-staff"
style={{ width }}
// (height comes from the SVG)
role="img"
aria-label={midi !== null ? `Currently played: note` : 'No note currently detected'}
/>