resize fretboard

src/App.css

@@ -48,7 +48,7 @@
   flex-direction: column;
   align-items: center;
   width: 100%;
-  max-width: 600px;
+  max-width: 850px;
   transition: transform 0.2s ease;
 }
 
@@ -497,4 +497,87 @@ button {
   background-color: var(--color-surface);
   color: var(--color-primary);
   box-shadow: var(--shadow-sm);
+}
+
+/* Mobile Landscape Optimization */
+@media (max-height: 500px) and (orientation: landscape) {
+  .app-header {
+    padding: 4px var(--spacing-md);
+  }
+
+  .main-stage {
+    padding: 4px;
+    flex-direction: row;
+    /* Side-by-side if screen is wide enough */
+    align-items: stretch;
+    gap: var(--spacing-md);
+  }
+
+  .card.sheet-music-card {
+    max-width: 95vw;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    padding: var(--spacing-sm);
+  }
+
+  /* Specific adjustment for sheet music container */
+  .sheet-music-container {
+    width: auto;
+    flex: 1;
+    min-width: 250px;
+    max-width: 50%;
+    display: flex;
+    justify-content: center;
+  }
+
+  /* Hint card should be on the side */
+  .hint-card {
+    margin-top: 0;
+    margin-left: var(--spacing-md);
+    flex: 1;
+    min-width: 250px;
+    max-width: 45%;
+    padding: var(--spacing-xs);
+  }
+
+  .hint-note {
+    font-size: 1.2rem;
+    margin-bottom: 2px;
+  }
+
+  /* Make sure hint isn't huge and scrolls if needed */
+  .fretboard-container {
+    max-height: 150px;
+    overflow-y: hidden;
+    display: flex;
+    justify-content: center;
+  }
+
+  .fretboard-container svg {
+    height: 100%;
+    width: auto;
+    max-width: 100%;
+  }
+
+  /* Move feedback and actions */
+  .feedback-area {
+    width: 100%;
+    height: 30px;
+    order: 3;
+    /* Force to bottom */
+    margin-top: 5px;
+  }
+
+  .action-row {
+    margin-top: 5px !important;
+    order: 4;
+    width: 100%;
+  }
+}
+
+/* Ensure FretboardHint container handles flexible width generic */
+.fretboard-container {
+  width: 100%;
 }

src/App.tsx

@@ -343,16 +343,18 @@ function App() {
 
       <main className="main-stage">
         <div className="card sheet-music-card">
-          <SheetMusic
+          <div className="sheet-music-container">
-            targetMidi={targetMidi}
+            <SheetMusic
-            playedMidi={pitchData?.midi}
+              targetMidi={targetMidi}
-            keySignature={settings.keySignature}
+              playedMidi={pitchData?.midi}
-            clef={currentInstrumentDef.clefMode}
+              keySignature={settings.keySignature}
-            transpose={currentInstrumentDef.transpose}
+              clef={currentInstrumentDef.clefMode}
-            width={Math.min(window.innerWidth - 40, 500)}
+              transpose={currentInstrumentDef.transpose}
-            height={currentInstrumentDef.clefMode === 'grand' ? 300 : 250}
+              width={Math.min(window.innerWidth - 40, 500)}
-            hideTargetNote={settings.gameMode === 'ear_training' && !revealed}
+              height={currentInstrumentDef.clefMode === 'grand' ? 300 : 250}
-          />
+              hideTargetNote={settings.gameMode === 'ear_training' && !revealed}
+            />
+          </div>
 
           {!settings.zenMode && (
             <div className="feedback-area">

src/components/FretboardHint.tsx

@@ -53,10 +53,10 @@ export function FretboardHint({ tuning, positions, maxFrets = 15 }: FretboardHin
     return (
         <div className="fretboard-container" style={{ overflowX: 'auto', maxWidth: '100%' }}>
             <svg
-                width={width}
+                width="100%"
-                height={height}
+                height="100%"
                 viewBox={`0 0 ${width} ${height}`}
-                style={{ display: 'block', margin: '0 auto' }}
+                style={{ display: 'block', margin: '0 auto', maxHeight: '100%' }}
             >
                 {/* Fretboard background */}
                 <rect