From 24a13c05b3a8b7b8a8a163744bb34d510eea02fd Mon Sep 17 00:00:00 2001
From: Val Alexander <bunsthedev@gmail.com>
Date: Mon, 2 Mar 2026 09:21:45 -0600
Subject: [PATCH] fix(ui): add mobile responsive margins and overflow fallback

- Add margin: 0 for mobile viewports (<=600px, <=400px) to prevent clipping
- Add overflow: hidden fallback for older browsers (Safari <16, Firefox <81)
- Fixes mobile regression where negative margins over-cancel padding

Addresses issue where save button was clipped on mobile due to
hard-coded desktop negative margins not accounting for mobile's
smaller content padding (4px 4px 16px).
---
 ui/src/styles/config.css | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/ui/src/styles/config.css b/ui/src/styles/config.css
index c90dfd9be31..916e4429b06 100644
--- a/ui/src/styles/config.css
+++ b/ui/src/styles/config.css
@@ -12,9 +12,24 @@
   border-radius: var(--radius-xl);
   border: 1px solid var(--border);
   background: var(--panel);
+  overflow: hidden; /* fallback for older browsers */
   overflow: clip;
 }
 
+/* Mobile: adjust margins to match mobile .content padding (4px 4px 16px) */
+@media (max-width: 600px) {
+  .config-layout {
+    margin: 0; /* safest: no negative margin cancellation on mobile */
+  }
+}
+
+/* Small mobile: even smaller padding */
+@media (max-width: 400px) {
+  .config-layout {
+    margin: 0;
+  }
+}
+
 /* ===========================================
    Sidebar
    =========================================== */
@@ -377,6 +392,7 @@
   min-height: 0;
   min-width: 0;
   background: var(--panel);
+  overflow: hidden; /* fallback for older browsers */
   overflow: clip;
 }