From b27c24cfd026ecb09771d71c4e4badb030196706 Mon Sep 17 00:00:00 2001
From: Jens Mohrmann <mail@jensmohrmann.de>
Date: Tue, 30 Dec 2025 19:24:27 +0100
Subject: [PATCH] Mobile UI improvements

---
 src/App.css | 20 ++++++++++---------
 src/App.tsx | 55 ++++++++++++++++++++++++++++++++++++++++++++---------
 2 files changed, 57 insertions(+), 18 deletions(-)

diff --git a/src/App.css b/src/App.css
index 5695a5b..ec8dff6 100644
--- a/src/App.css
+++ b/src/App.css
@@ -23,7 +23,7 @@
   color: var(--color-primary);
 }
 
-@media (max-width: 400px) {
+@media (max-width: 600px) {
   .logo {
     display: none;
   }
@@ -407,7 +407,7 @@ button {
 
 .exit-zen-button {
   position: fixed;
-  bottom: 20px;
+  top: 20px;
   right: 20px;
   padding: 10px 20px;
   background: var(--color-surface);
@@ -594,7 +594,7 @@ button {
   transition: all 0.2s;
 }
 
-@media (max-width: 450px) {
+@media (max-width: 600px) {
   .toggle-option {
     padding: 4px 8px;
     font-size: 0.75rem;
@@ -666,12 +666,13 @@ button {
   }
 
   .card.sheet-music-card {
-    max-width: 100vw;
-    width: 100vw;
+    max-width: 100%;
+    width: 100%;
     min-height: 100vh;
     margin: 0;
     border-radius: 0;
     align-items: stretch;
+    box-sizing: border-box;
   }
 
   /* Staff Row: Horizontal Layout for Staff + Note Name */
@@ -871,13 +872,14 @@ button {
     height: 20px;
   }
 
-  /* Restore Zen Toggle in Landscape Mobile */
+  /* Restore Zen Toggle in Landscape Mobile - Move to top right to avoid Skip button */
   .exit-zen-button {
     display: block;
     transform: scale(0.8);
-    bottom: 45px;
-    /* Move up above action row */
-    right: 5px;
+    top: 10px;
+    bottom: auto;
+    right: 60px;
+    /* Left of the settings/help/fullscreen if present, or just top right */
     padding: 6px 12px;
     font-size: 0.8rem;
     background: rgba(255, 255, 255, 0.9);
diff --git a/src/App.tsx b/src/App.tsx
index d9e4e06..7dee7b7 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -24,7 +24,7 @@ import { INSTRUMENT_DEFINITIONS } from './music/InstrumentConfigs';
 import { Fretboard } from './components/Fretboard';
 import { PianoKeys } from './components/PianoKeys';
 
-import { Mic, MicOff, SkipForward, HelpCircle, Volume2, X, Guitar, Settings } from 'lucide-react';
+import { Mic, MicOff, SkipForward, HelpCircle, Volume2, X, Guitar, Settings, Maximize, Minimize } from 'lucide-react';
 import './App.css';
 import './styles/skip-button.css';
 
@@ -74,6 +74,27 @@ function App() {
   const [isOpenSourceModalOpen, setIsOpenSourceModalOpen] = useState(false);
   const [hoveredMidi, setHoveredMidi] = useState<number | null>(null);
   const feedbackTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const [isFullscreen, setIsFullscreen] = useState(false);
+
+  useEffect(() => {
+    const handleFullscreenChange = () => {
+      setIsFullscreen(!!document.fullscreenElement);
+    };
+    document.addEventListener('fullscreenchange', handleFullscreenChange);
+    return () => document.removeEventListener('fullscreenchange', handleFullscreenChange);
+  }, []);
+
+  const toggleFullscreen = useCallback(async () => {
+    try {
+      if (!document.fullscreenElement) {
+        await document.documentElement.requestFullscreen();
+      } else {
+        await document.exitFullscreen();
+      }
+    } catch (err) {
+      console.error("Error toggling fullscreen:", err);
+    }
+  }, []);
 
   const currentTuning = TUNINGS[settings.tuningId];
   const currentInstrumentDef = INSTRUMENT_DEFINITIONS[settings.instrument];
@@ -423,6 +444,20 @@ function App() {
               </button>
             </div>
 
+            <button
+              className="icon-button"
+              onClick={toggleFullscreen}
+              title="Toggle Fullscreen"
+            >
+              {isFullscreen ? <Minimize size={24} /> : <Maximize size={24} />}
+            </button>
+            <button
+              className="icon-button"
+              onClick={() => setSettings(s => ({ ...s, zenMode: !s.zenMode }))}
+              title="Enter Zen Mode (Z)"
+            >
+              <Maximize size={24} style={{ transform: 'rotate(45deg)' }} />
+            </button>
             <button
               className="icon-button help-btn"
               onClick={() => setShowHelp(true)}
@@ -609,14 +644,16 @@ function App() {
       )}
 
 
-      {/* Floating Zen Mode Button (Toggle) */}
-      <button
-        className="exit-zen-button"
-        onClick={() => setSettings(s => ({ ...s, zenMode: !s.zenMode }))}
-        title="Keyboard Shortcut: Z"
-      >
-        {settings.zenMode ? "Exit Zen Mode" : "Zen Mode"}
-      </button>
+      {/* Exit Zen Mode Button - Only shown in Zen Mode */}
+      {settings.zenMode && (
+        <button
+          className="exit-zen-button"
+          onClick={() => setSettings(s => ({ ...s, zenMode: false }))}
+          title="Keyboard Shortcut: Z"
+        >
+          Exit Zen Mode
+        </button>
+      )}
 
       {/* Help Popup */}
       {