From caa07012a7a8eef2fc36bf54823ca751ceee5045 Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Mon, 13 Oct 2025 23:53:43 +0200
Subject: [PATCH] fix(ui): make settings view mobile-friendly

- Add max-width: 100% and overflow handling to preview content
- Add word-break and overflow-wrap to prevent text overflow
- Make inline settings stack vertically on mobile
- Reduce padding on mobile for settings view
- Make zap preset buttons flex to fit mobile width
- Ensure all setting controls respect viewport width
- Fix preview heading size on mobile
---
 src/styles/components/forms.css    | 62 ++++++++++++++++++++++++++++--
 src/styles/components/settings.css | 28 ++++++++++++++
 2 files changed, 86 insertions(+), 4 deletions(-)

diff --git a/src/styles/components/forms.css b/src/styles/components/forms.css
index 2b7057ca..3d219513 100644
--- a/src/styles/components/forms.css
+++ b/src/styles/components/forms.css
@@ -14,11 +14,34 @@
 .font-size-btn { min-width: 33px; height: 33px; padding: 0; background: transparent; border: 1px solid rgb(82 82 91); /* zinc-600 */ border-radius: 6px; color: rgb(212 212 216); /* zinc-300 */ cursor: pointer; transition: all 0.2s; font-weight: bold; display: flex; align-items: center; justify-content: center; }
 .font-size-btn:hover { background: rgb(63 63 70); /* zinc-700 */ border-color: rgb(113 113 122); /* zinc-500 */ }
 .font-size-btn.active { background: rgb(99 102 241); /* indigo-500 */ border-color: rgb(99 102 241); /* indigo-500 */ color: white; }
-.setting-preview { margin: 1.5rem 0; padding: 1rem; background: rgb(24 24 27); /* zinc-900 */ border: 1px solid rgb(63 63 70); /* zinc-700 */ border-radius: 8px; }
+.setting-preview { 
+  margin: 1.5rem 0; 
+  padding: 1rem; 
+  background: rgb(24 24 27); /* zinc-900 */ 
+  border: 1px solid rgb(63 63 70); /* zinc-700 */ 
+  border-radius: 8px;
+  max-width: 100%;
+  overflow: hidden;
+}
 .preview-label { font-size: 0.875rem; color: rgb(161 161 170); /* zinc-400 */ margin-bottom: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; }
-.preview-content { color: rgb(228 228 231); /* zinc-200 */ line-height: 1.7; }
-.preview-content h3 { margin: 0 0 1rem 0; font-size: 1.5em; color: rgb(255 255 255); /* white */ }
-.preview-content p { margin: 0.75rem 0; }
+.preview-content { 
+  color: rgb(228 228 231); /* zinc-200 */ 
+  line-height: 1.7;
+  max-width: 100%;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  word-break: break-word;
+}
+.preview-content h3 { 
+  margin: 0 0 1rem 0; 
+  font-size: 1.5em; 
+  color: rgb(255 255 255); /* white */
+  word-wrap: break-word;
+}
+.preview-content p { 
+  margin: 0.75rem 0;
+  word-wrap: break-word;
+}
 .setting-select { width: 100%; padding: 0.5rem; background: rgb(39 39 42); /* zinc-800 */ border: 1px solid rgb(82 82 91); /* zinc-600 */ border-radius: 4px; color: rgb(255 255 255); /* white */ font-size: 1rem; }
 .setting-inline .setting-select { width: auto; min-width: 200px; flex: 1; }
 .setting-select:focus { outline: none; border-color: rgb(99 102 241); /* indigo-500 */ }
@@ -27,4 +50,35 @@
 .setting-checkbox { width: 18px; height: 18px; cursor: pointer; flex-shrink: 0; margin: 0; accent-color: rgb(99 102 241); /* indigo-500 */ }
 .checkbox-label span { color: rgb(228 228 231); /* zinc-200 */ text-align: left; font-weight: 500; }
 
+/* Mobile responsive styles */
+@media (max-width: 768px) {
+  .setting-group.setting-inline {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.75rem;
+  }
+  
+  .setting-inline .setting-select {
+    width: 100%;
+    min-width: unset;
+  }
+  
+  .setting-control {
+    width: 100%;
+    justify-content: flex-start;
+  }
+  
+  .setting-buttons {
+    flex-wrap: wrap;
+  }
+  
+  .color-picker {
+    flex-wrap: wrap;
+  }
+  
+  .preview-content h3 {
+    font-size: 1.25em;
+  }
+}
+
 
diff --git a/src/styles/components/settings.css b/src/styles/components/settings.css
index 8838a7e7..4039e075 100644
--- a/src/styles/components/settings.css
+++ b/src/styles/components/settings.css
@@ -96,4 +96,32 @@
   color: rgb(161 161 170); /* zinc-400 */
 }
 
+/* Mobile responsive styles */
+@media (max-width: 768px) {
+  .settings-view {
+    padding: 0.5rem;
+    max-width: 100vw;
+    overflow-x: hidden;
+  }
+  
+  .settings-content {
+    padding: 0 0.25rem 2rem 0.25rem;
+    max-width: 100%;
+  }
+  
+  .settings-section {
+    max-width: 100%;
+    overflow-x: hidden;
+  }
+  
+  .zap-preset-buttons {
+    width: 100%;
+  }
+  
+  .zap-preset-btn {
+    flex: 1 1 auto;
+    min-width: 70px;
+  }
+}
+