diff --git a/src/App.css b/src/App.css
index 4b836f0..cf606ad 100644
--- a/src/App.css
+++ b/src/App.css
@@ -735,13 +735,13 @@ button {
     flex: 0 0 auto;
     min-height: 120px;
     /* Reduced to allow more space for fretboard */
-    max-height: 180px;
+    /* max-height removed to allow full staff visibility */
     transform: scale(1.0);
     /* No scaling to prevent overflow */
     transform-origin: center center;
     justify-content: center;
-    margin-bottom: 0;
-    padding-top: 10px;
+    margin-bottom: 5px;
+    padding-top: 5px;
     z-index: 1;
   }
 
diff --git a/src/App.tsx b/src/App.tsx
index 33fd018..cb12ba9 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -77,10 +77,12 @@ function App() {
   const feedbackTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const [isFullscreen, setIsFullscreen] = useState(false);
   const [windowWidth, setWindowWidth] = useState(window.innerWidth);
+  const [windowHeight, setWindowHeight] = useState(window.innerHeight);
 
   useEffect(() => {
     const handleResize = () => {
       setWindowWidth(window.innerWidth);
+      setWindowHeight(window.innerHeight);
     };
     window.addEventListener('resize', handleResize);
     return () => window.removeEventListener('resize', handleResize);
@@ -507,7 +509,11 @@ function App() {
               clef={activeClef}
               transpose={activeTranspose}
               width={Math.min(windowWidth - 40, 500)}
-              height={activeClef === 'grand' ? 260 : 180}
+              height={
+                activeClef === 'grand'
+                  ? (windowHeight < 500 ? 190 : 260) // Compact Grand Staff if short screen
+                  : (windowHeight < 500 ? 120 : 180) // Compact Single Staff
+              }
               hideTargetNote={settings.gameMode === 'ear_training' && !revealed}
               hoverMidi={settings.showHint ? hoveredMidi : null}
             />
diff --git a/src/components/SheetMusic.tsx b/src/components/SheetMusic.tsx
index 1337a97..37090a8 100644
--- a/src/components/SheetMusic.tsx
+++ b/src/components/SheetMusic.tsx
@@ -63,15 +63,20 @@ export const SheetMusic: React.FC<SheetMusicProps> = ({
         let stavesMeasure1: Record<string, Stave> = {};
         let stavesMeasure2: Record<string, Stave> = {};
 
+        const isCompact = height < 200;
+        const trebleY = isCompact ? 10 : 20;
+        const bassY = isCompact ? 85 : 110;
+        // Gap reduced from 90 (110-20) to 75 (85-10) in compact mode
+
         // --- Create Staves for Measure 1 ---
         if (clef === 'grand') {
             // Measure 1: Treble
-            const m1Treble = new Stave(startX, 20, measureWidth);
+            const m1Treble = new Stave(startX, trebleY, measureWidth);
             m1Treble.addClef('treble').addKeySignature(keySignature);
             m1Treble.setContext(context).draw();
 
             // Measure 1: Bass
-            const m1Bass = new Stave(startX, 110, measureWidth);
+            const m1Bass = new Stave(startX, bassY, measureWidth);
             m1Bass.addClef('bass').addKeySignature(keySignature);
             m1Bass.setContext(context).draw();
 
@@ -93,14 +98,14 @@ export const SheetMusic: React.FC<SheetMusicProps> = ({
 
             if (numMeasures === 2) {
                 // Measure 2: Treble
-                const m2Treble = new Stave(startX + measureWidth, 20, measureWidth);
+                const m2Treble = new Stave(startX + measureWidth, trebleY, measureWidth);
                 // No clef/key sig repeated typically for just next measure in same system, 
                 // UNLESS it's a new system. Here it's same system.
                 // But VexFlow might require setting context context.
                 m2Treble.setContext(context).draw();
 
                 // Measure 2: Bass
-                const m2Bass = new Stave(startX + measureWidth, 110, measureWidth);
+                const m2Bass = new Stave(startX + measureWidth, bassY, measureWidth);
                 m2Bass.setContext(context).draw();
 
                 stavesMeasure2 = { treble: m2Treble, bass: m2Bass };
@@ -119,14 +124,15 @@ export const SheetMusic: React.FC<SheetMusicProps> = ({
 
         } else {
             // Single Stave
-            const m1Stave = new Stave(startX, 30, measureWidth);
+            const staveY = isCompact ? 10 : 30;
+            const m1Stave = new Stave(startX, staveY, measureWidth);
             m1Stave.addClef(clef).addKeySignature(keySignature);
             m1Stave.setContext(context).draw();
 
             stavesMeasure1 = { [clef]: m1Stave };
 
             if (numMeasures === 2) {
-                const m2Stave = new Stave(startX + measureWidth, 30, measureWidth);
+                const m2Stave = new Stave(startX + measureWidth, staveY, measureWidth);
                 m2Stave.setContext(context).draw();
                 stavesMeasure2 = { [clef]: m2Stave };
             }