From e80930b6844878366eea12adedef03bd84178338 Mon Sep 17 00:00:00 2001
From: Catubba <40827997+catubba@users.noreply.github.com>
Date: Thu, 9 Jul 2026 23:35:56 +0200
Subject: [PATCH] feat(ui): stack the settings nav into a 2-column grid below
 900px

---
 frontend/src/pages/Settings.tsx | 20 ++++---------
 frontend/src/responsive.css     | 53 +++++++++++++++++++++++++++++++++
 2 files changed, 58 insertions(+), 15 deletions(-)

diff --git a/frontend/src/pages/Settings.tsx b/frontend/src/pages/Settings.tsx
index c1cf537..3f32399 100644
--- a/frontend/src/pages/Settings.tsx
+++ b/frontend/src/pages/Settings.tsx
@@ -24,18 +24,14 @@ export function Settings(_props: { onClose: () => void }) {
   const [tab, setTab] = useState<Tab>('localization')
 
   return (
-    <div style={{ display: 'grid', gridTemplateColumns: '240px 1fr', gap: 22, alignItems: 'start', paddingBottom: 28 }}>
+    <div className="jn-settings">
       <nav
+        className="jn-settings-nav"
         style={{
           background: c.panel,
           border: `1px solid ${c.border}`,
           borderRadius: 12,
           padding: 7,
-          display: 'flex',
-          flexDirection: 'column',
-          gap: 3,
-          position: 'sticky',
-          top: 22,
         }}
       >
         {NAV.map(({ key }) => {
@@ -43,13 +39,9 @@ export function Settings(_props: { onClose: () => void }) {
           return (
             <button
               key={key}
+              className="jn-settings-navbtn"
               onClick={() => setTab(key)}
               style={{
-                display: 'flex',
-                alignItems: 'center',
-                gap: 11,
-                width: '100%',
-                textAlign: 'left',
                 background: active ? 'rgba(232,131,15,.1)' : 'transparent',
                 border: `1px solid ${active ? 'rgba(232,131,15,.32)' : 'transparent'}`,
                 borderRadius: 8,
@@ -59,18 +51,16 @@ export function Settings(_props: { onClose: () => void }) {
               }}
             >
               <span
+                className="jn-settings-rail"
                 style={{
-                  width: 3,
-                  alignSelf: 'stretch',
-                  minHeight: 30,
                   borderRadius: 2,
                   background: active ? c.accent : 'transparent',
-                  flex: '0 0 auto',
                 }}
               />
               <span style={{ display: 'flex', flexDirection: 'column', gap: 1, alignItems: 'flex-start', minWidth: 0 }}>
                 <span style={{ fontSize: 13, fontWeight: 600 }}>{t(`settings.nav.${key}`)}</span>
                 <span
+                  className="jn-settings-hint"
                   style={{
                     fontSize: 11,
                     fontWeight: 500,
diff --git a/frontend/src/responsive.css b/frontend/src/responsive.css
index 99354f1..73ef9c8 100644
--- a/frontend/src/responsive.css
+++ b/frontend/src/responsive.css
@@ -88,6 +88,35 @@
   grid-template-columns: 84px 96px 1fr;
 }
 
+/* Settings */
+.jn-settings {
+  display: grid;
+  grid-template-columns: 240px 1fr;
+  gap: 22px;
+  align-items: start;
+  padding-bottom: 28px;
+}
+.jn-settings-nav {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  position: sticky;
+  top: 22px;
+}
+.jn-settings-navbtn {
+  display: flex;
+  align-items: center;
+  gap: 11px;
+  width: 100%;
+  text-align: left;
+}
+.jn-settings-rail {
+  width: 3px;
+  align-self: stretch;
+  min-height: 30px;
+  flex: 0 0 auto;
+}
+
 @media (max-width: 900px) {
   .jn-shell {
     padding: 14px 14px 24px;
@@ -157,4 +186,28 @@
   .jn-log-row > :nth-child(3) {
     grid-column: 1 / -1;
   }
+
+  .jn-settings {
+    grid-template-columns: 1fr;
+    gap: 14px;
+  }
+  /* Nav becomes a 2x3 grid of compact buttons above the content. `sticky` is dropped:
+   * on a phone a pinned nav eats a third of the viewport. */
+  .jn-settings-nav {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 6px;
+    position: static;
+  }
+  .jn-settings-navbtn {
+    gap: 8px;
+    min-width: 0;
+  }
+  .jn-settings-rail {
+    min-height: 22px;
+  }
+  /* The hint line is first-run guidance for desktop; it cannot survive a ~170px button. */
+  .jn-settings-hint {
+    display: none;
+  }
 }