From cf24205cad43d3667a1e5213befa55f47190aafa Mon Sep 17 00:00:00 2001
From: Magnus Madsen <magnus-madsen@users.noreply.github.com>
Date: Thu, 12 Mar 2026 18:32:44 +0100
Subject: [PATCH 1/2] fix: group links and share button with dark mode toggle
 on the right

Wrap the links, shareable button, and dark mode toggle in a shared
flex container so they float together on the right side of the menu bar.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/App.css  |  5 +++++
 src/Menu.jsx | 54 +++++++++++++++++++++++++++-------------------------
 2 files changed, 33 insertions(+), 26 deletions(-)

diff --git a/src/App.css b/src/App.css
index be08fb6..6434fb2 100644
--- a/src/App.css
+++ b/src/App.css
@@ -69,6 +69,11 @@ code {
   white-space: nowrap;
 }
 
+.menu-right {
+  display: flex;
+  align-items: center;
+}
+
 .page {
   display: flex;
   flex-direction: row;
diff --git a/src/Menu.jsx b/src/Menu.jsx
index de48ef9..c4b9b9b 100644
--- a/src/Menu.jsx
+++ b/src/Menu.jsx
@@ -91,38 +91,40 @@ export default function Menu({ connected, notifyRun, notifySampleChange, program
         {getDropDown()}
       </Form>
 
-      <div className="links">
-        <a href="https://flix.dev/">
-          <Button color="link" className="ml-3">
-            Website
-          </Button>
-        </a>
+      <div className="menu-right">
+        <div className="links">
+          <a href="https://flix.dev/">
+            <Button color="link" className="ml-3">
+              Website
+            </Button>
+          </a>
 
-        <a href="https://doc.flix.dev/">
-          <Button color="link" className="ml-3">
-            Documentation
-          </Button>
-        </a>
+          <a href="https://doc.flix.dev/">
+            <Button color="link" className="ml-3">
+              Documentation
+            </Button>
+          </a>
+
+          <a href="https://api.flix.dev/">
+            <Button color="link" className="ml-3">
+              Standard Library
+            </Button>
+          </a>
 
-        <a href="https://api.flix.dev/">
-          <Button color="link" className="ml-3">
-            Standard Library
+          <Button color="light" className="ml-3" onClick={updateLinkUrl}>
+            Shareable Link <i className="fa fa-clipboard ml-2" />
           </Button>
-        </a>
+        </div>
 
-        <Button color="light" className="ml-3" onClick={updateLinkUrl}>
-          Shareable Link <i className="fa fa-clipboard ml-2" />
+        <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 8b3315af2adc5d051848a402e0514a2b7563ca05 Mon Sep 17 00:00:00 2001
From: Magnus Madsen <magnus-madsen@users.noreply.github.com>
Date: Thu, 12 Mar 2026 18:34:39 +0100
Subject: [PATCH 2/2] fix: center spinner within right pane instead of using
 viewport margin

Replace margin-top: 30vh with flexbox centering so the spinner stays
centered in the right pane at all viewport sizes, including the
responsive breakpoint where the pane is shorter.

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

diff --git a/src/App.css b/src/App.css
index 6434fb2..2d47b5f 100644
--- a/src/App.css
+++ b/src/App.css
@@ -136,10 +136,17 @@ code {
   }
 }
 
+.right-pane-top {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
 .spinner {
-  margin-top: 30vh;
   display: flex;
   justify-content: center;
+  align-items: center;
+  flex: 1;
 }
 
 .statistics {