From 45f045a5a41475bf6d99b12ec34a03a04f014444 Mon Sep 17 00:00:00 2001
From: binwiederhier <phil@heckel.io>
Date: Sat, 14 Mar 2026 14:39:51 -0400
Subject: [PATCH] Make config generator work on mobile

---
 docs/config.md                       |  4 ++
 docs/static/css/config-generator.css | 93 +++++++++++++++++++++++++++-
 docs/static/js/config-generator.js   | 18 ++++++
 3 files changed, 113 insertions(+), 2 deletions(-)

diff --git a/docs/config.md b/docs/config.md
index c6043cb8..b9c8f07f 100644
--- a/docs/config.md
+++ b/docs/config.md
@@ -162,6 +162,10 @@ This generator helps you configure your self-hosted ntfy instance. It's not full
 </div>
 </div>
 <div class="cg-modal-body">
+<div class="cg-mobile-toggle">
+  <button class="cg-mobile-toggle-btn active" data-show="left">Edit</button>
+  <button class="cg-mobile-toggle-btn" data-show="right">Preview</button>
+</div>
 <div id="cg-left">
 <div class="cg-nav">
 <div class="cg-nav-tab active" data-panel="cg-panel-general">General</div>
diff --git a/docs/static/css/config-generator.css b/docs/static/css/config-generator.css
index 5acd5fe0..4f12ca2c 100644
--- a/docs/static/css/config-generator.css
+++ b/docs/static/css/config-generator.css
@@ -743,22 +743,111 @@ body[data-md-color-scheme="slate"] .cg-warning {
     border-color: #665200;
 }
 
+/* Mobile toggle bar (hidden on desktop) */
+.cg-mobile-toggle {
+    display: none;
+}
+
 /* Responsive */
 @media (max-width: 900px) {
     .cg-modal-dialog {
-        inset: 8px;
+        inset: 0;
+        border-radius: 0;
+    }
+
+    .cg-modal-header {
+        padding: 8px 16px;
+    }
+
+    .cg-modal-title {
+        font-size: 0.85rem;
+    }
+
+    .cg-modal-desc {
+        display: none;
     }
 
     .cg-modal-body {
         flex-direction: column;
     }
 
+    .cg-mobile-toggle {
+        display: flex;
+        flex-shrink: 0;
+        border-bottom: 1px solid #ddd;
+    }
+
+    .cg-mobile-toggle-btn {
+        flex: 1;
+        padding: 8px 0;
+        border: none;
+        background: #f5f5f5;
+        font-size: 0.78rem;
+        font-weight: 500;
+        font-family: inherit;
+        color: #777;
+        cursor: pointer;
+        transition: background 0.15s, color 0.15s;
+    }
+
+    .cg-mobile-toggle-btn.active {
+        background: #fff;
+        color: var(--md-primary-fg-color);
+        box-shadow: inset 0 -2px 0 var(--md-primary-fg-color);
+    }
+
     #cg-left {
         border-right: none;
-        border-bottom: 1px solid #ddd;
+        flex: 1;
+        min-height: 0;
     }
 
     #cg-right {
         flex: 1;
+        display: none;
+        min-height: 0;
+    }
+
+    #cg-right.cg-mobile-active {
+        display: flex;
+    }
+
+    #cg-left.cg-mobile-hidden {
+        display: none;
+    }
+
+    .cg-nav {
+        overflow-x: auto;
+        flex-wrap: nowrap;
+        -webkit-overflow-scrolling: touch;
+    }
+
+    .cg-inline-field {
+        flex-direction: column;
+        align-items: stretch;
+        gap: 4px;
+    }
+
+    .cg-inline-field > label {
+        width: 100%;
+    }
+
+    .cg-panel:not(#cg-panel-general) .cg-inline-field > label {
+        width: 100%;
     }
 }
+
+/* Dark mode mobile toggle */
+body[data-md-color-scheme="slate"] .cg-mobile-toggle {
+    border-bottom-color: #444;
+}
+
+body[data-md-color-scheme="slate"] .cg-mobile-toggle-btn {
+    background: #2a2a3a;
+    color: #888;
+}
+
+body[data-md-color-scheme="slate"] .cg-mobile-toggle-btn.active {
+    background: #1e1e2e;
+    color: var(--md-primary-fg-color);
+}
diff --git a/docs/static/js/config-generator.js b/docs/static/js/config-generator.js
index 6d03eb5b..7c093ead 100644
--- a/docs/static/js/config-generator.js
+++ b/docs/static/js/config-generator.js
@@ -1072,6 +1072,24 @@
         closeModal(els);
       }
     });
+
+    // Mobile toggle between Edit and Preview panels
+    const toggleBtns = modal.querySelectorAll(".cg-mobile-toggle-btn");
+    const leftPanel = document.getElementById("cg-left");
+    const rightPanel = document.getElementById("cg-right");
+    toggleBtns.forEach((btn) => {
+      btn.addEventListener("click", () => {
+        toggleBtns.forEach((b) => b.classList.remove("active"));
+        btn.classList.add("active");
+        if (btn.dataset.show === "right") {
+          leftPanel.classList.add("cg-mobile-hidden");
+          rightPanel.classList.add("cg-mobile-active");
+        } else {
+          leftPanel.classList.remove("cg-mobile-hidden");
+          rightPanel.classList.remove("cg-mobile-active");
+        }
+      });
+    });
   }
 
   function setupAuthEvents(els) {