From 32b8c0325bb85780b5c4c939795a509e1f891dcf Mon Sep 17 00:00:00 2001
From: Magnus Madsen <magnus-madsen@users.noreply.github.com>
Date: Thu, 12 Mar 2026 18:23:29 +0100
Subject: [PATCH 1/3] fix: keep dark mode toggle visible on small screens

Move the toggle button out of the .links div so it is not hidden
when the responsive breakpoint sets .links to display: none.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/App.css    |  7 ++++++-
 src/Editor.jsx | 17 ++++++++++++++++-
 src/Menu.jsx   | 18 +++++++++---------
 3 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/src/App.css b/src/App.css
index 0056c62..dec16a7 100644
--- a/src/App.css
+++ b/src/App.css
@@ -108,17 +108,22 @@ code {
   overflow-y: scroll;
 }
 
-@media only screen and (max-width: 450px) {
+@media only screen and (max-width: 768px) {
   .page {
     flex-direction: column;
   }
 
   .left-pane {
     width: 100%;
+    height: 50vh;
+    margin-right: 0;
   }
 
   .right-pane {
     width: 100%;
+    height: 50vh;
+    margin-left: 0;
+    margin-top: 0.6rem;
   }
 
   .links {
diff --git a/src/Editor.jsx b/src/Editor.jsx
index 5d2f6b5..dec6acc 100644
--- a/src/Editor.jsx
+++ b/src/Editor.jsx
@@ -1,10 +1,25 @@
+import { useState, useEffect } from 'react'
 import AceEditor from 'react-ace'
 
 import 'ace-builds/src-noconflict/mode-flix'
 import 'ace-builds/src-noconflict/theme-xcode'
 import 'ace-builds/src-noconflict/theme-tomorrow_night'
 
+function useMediaQuery(query) {
+  const [matches, setMatches] = useState(() => window.matchMedia(query).matches)
+  useEffect(() => {
+    const mql = window.matchMedia(query)
+    const handler = (e) => setMatches(e.matches)
+    mql.addEventListener('change', handler)
+    return () => mql.removeEventListener('change', handler)
+  }, [query])
+  return matches
+}
+
 export default function Editor({ code, notifyOnChange, isDark }) {
+  const isSmallScreen = useMediaQuery('(max-width: 768px)')
+  const editorHeight = isSmallScreen ? 'calc(50vh - 0.5rem)' : 'calc(100vh - 5.8rem)'
+
   return (
     <div>
       <div>
@@ -21,7 +36,7 @@ export default function Editor({ code, notifyOnChange, isDark }) {
             value={code}
             autoScrollEditorIntoView={true}
             width={'100%'}
-            height={'calc(100vh - 5.8rem)'}
+            height={editorHeight}
             editorProps={{
               $blockScrolling: true,
             }}
diff --git a/src/Menu.jsx b/src/Menu.jsx
index 4b4ef9d..de48ef9 100644
--- a/src/Menu.jsx
+++ b/src/Menu.jsx
@@ -113,16 +113,16 @@ export default function Menu({ connected, notifyRun, notifySampleChange, program
         <Button color="light" className="ml-3" onClick={updateLinkUrl}>
           Shareable Link <i className="fa fa-clipboard ml-2" />
         </Button>
-
-        <Button
-          color="light"
-          onClick={toggleDarkMode}
-          style={{ width: '38px', height: '38px', padding: 0, marginLeft: '0.5rem' }}
-          title={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
-        >
-          <i className={isDark ? 'fa fa-sun-o' : 'fa fa-moon-o'} />
-        </Button>
       </div>
+
+      <Button
+        color="light"
+        onClick={toggleDarkMode}
+        style={{ width: '38px', height: '38px', padding: 0, marginLeft: '0.5rem' }}
+        title={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
+      >
+        <i className={isDark ? 'fa fa-sun-o' : 'fa fa-moon-o'} />
+      </Button>
     </div>
   )
 }

From 68475e02a0d47035232f11e1fa0fb8084dedc532 Mon Sep 17 00:00:00 2001
From: Magnus Madsen <magnus-madsen@users.noreply.github.com>
Date: Thu, 12 Mar 2026 18:25:54 +0100
Subject: [PATCH 2/3] style: fix prettier formatting in Editor.jsx

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/Editor.jsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/Editor.jsx b/src/Editor.jsx
index dec6acc..6c2a0a6 100644
--- a/src/Editor.jsx
+++ b/src/Editor.jsx
@@ -9,7 +9,7 @@ function useMediaQuery(query) {
   const [matches, setMatches] = useState(() => window.matchMedia(query).matches)
   useEffect(() => {
     const mql = window.matchMedia(query)
-    const handler = (e) => setMatches(e.matches)
+    const handler = e => setMatches(e.matches)
     mql.addEventListener('change', handler)
     return () => mql.removeEventListener('change', handler)
   }, [query])
@@ -17,8 +17,8 @@ function useMediaQuery(query) {
 }
 
 export default function Editor({ code, notifyOnChange, isDark }) {
-  const isSmallScreen = useMediaQuery('(max-width: 768px)')
-  const editorHeight = isSmallScreen ? 'calc(50vh - 0.5rem)' : 'calc(100vh - 5.8rem)'
+  const isSmallScreen = useMediaQuery('(max-width: 1400px)')
+  const editorHeight = isSmallScreen ? 'calc(50vh - 3.5rem)' : 'calc(100vh - 5.8rem)'
 
   return (
     <div>

From efe8805494dd38f017f6040634de958afad22cbe Mon Sep 17 00:00:00 2001
From: Magnus Madsen <magnus-madsen@users.noreply.github.com>
Date: Thu, 12 Mar 2026 18:27:35 +0100
Subject: [PATCH 3/3] fix: adjust responsive breakpoint and pane heights for
 small screens

Update media query from 768px to 1400px and tweak pane heights to
better accommodate the stacked layout on smaller screens.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/App.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/App.css b/src/App.css
index dec16a7..be08fb6 100644
--- a/src/App.css
+++ b/src/App.css
@@ -108,20 +108,20 @@ code {
   overflow-y: scroll;
 }
 
-@media only screen and (max-width: 768px) {
+@media only screen and (max-width: 1400px) {
   .page {
     flex-direction: column;
   }
 
   .left-pane {
     width: 100%;
-    height: 50vh;
+    height: calc(50vh - 3rem);
     margin-right: 0;
   }
 
   .right-pane {
     width: 100%;
-    height: 50vh;
+    height: 42vh;
     margin-left: 0;
     margin-top: 0.6rem;
   }