fix(ui): prevent settings modal overflow on phones

Reverted debouncing logic and transparent window mode that were causing issues.
Kept the zoom step reduction from 0.2 to 0.1 for finer control.

packages/tauri-app/src-tauri/src/main.rs

@@ -9,7 +9,7 @@ use serde_json::json;
 use std::collections::HashMap;
 use std::sync::atomic::{AtomicBool, Ordering};
 use std::sync::Mutex;
-use std::time::{Instant, SystemTime, UNIX_EPOCH};
+use std::time::{SystemTime, UNIX_EPOCH};
 use tauri::menu::{MenuBuilder, MenuItem, SubmenuBuilder};
 use tauri::plugin::{Builder as PluginBuilder, TauriPlugin};
 use tauri::webview::Webview;
@@ -32,12 +32,10 @@ use std::os::windows::ffi::OsStrExt;
 use windows_sys::Win32::UI::Shell::SetCurrentProcessExplicitAppUserModelID;
 
 static QUIT_REQUESTED: AtomicBool = AtomicBool::new(false);
-static LAST_ZOOM_TIME: Mutex<Option<Instant>> = Mutex::new(None);
 const DEFAULT_ZOOM_LEVEL: f64 = 1.0;
 const ZOOM_STEP: f64 = 0.1;
 const MIN_ZOOM_LEVEL: f64 = 0.2;
 const MAX_ZOOM_LEVEL: f64 = 5.0;
-const ZOOM_DEBOUNCE_MS: u64 = 50;
 
 #[cfg(windows)]
 const WINDOWS_APP_USER_MODEL_ID: &str = "ai.neuralnomads.codenomad.client";
@@ -259,15 +257,6 @@ fn clamp_zoom_level(value: f64) -> f64 {
 }
 
 fn set_main_window_zoom(app_handle: &AppHandle, next_zoom: f64) {
-    if let Ok(mut last_zoom_time) = LAST_ZOOM_TIME.lock() {
-        if let Some(last_time) = *last_zoom_time {
-            if last_time.elapsed().as_millis() < ZOOM_DEBOUNCE_MS as u128 {
-                return;
-            }
-        }
-        *last_zoom_time = Some(Instant::now());
-    }
-
     if let Some(window) = app_handle.get_webview_window("main") {
         let normalized = clamp_zoom_level(next_zoom);
         if window.set_zoom(normalized).is_ok() {

packages/tauri-app/src-tauri/tauri.conf.json

@@ -23,7 +23,6 @@
         "resizable": true,
         "fullscreen": false,
         "decorations": true,
-        "transparent": true,
         "theme": "Dark",
         "backgroundColor": "#1a1a1a",
         "zoomHotkeysEnabled": true

packages/ui/src/components/settings/speech-settings-card.tsx

@@ -334,7 +334,7 @@ const Field: Component<{
         <div class="settings-toggle-title">{props.label}</div>
         <div class="settings-toggle-caption">{props.caption}</div>
       </div>
-      <div class="flex items-center gap-2 min-w-[18rem] max-w-[24rem] w-full">
+      <div class="flex items-center gap-2 w-full min-w-0 sm:min-w-[18rem] sm:max-w-[24rem]">
         {props.icon}
         <input
           type={props.type ?? "text"}
@@ -361,7 +361,7 @@ const SelectField: Component<{
         <div class="settings-toggle-title">{props.label}</div>
         <div class="settings-toggle-caption">{props.caption}</div>
       </div>
-      <div class="min-w-[18rem] max-w-[24rem] w-full">
+      <div class="w-full min-w-0 sm:min-w-[18rem] sm:max-w-[24rem]">
         <select value={props.value} onInput={(event) => props.onInput(event.currentTarget.value)} class="selector-input w-full">
           <For each={props.options}>{(option) => <option value={option.value}>{option.label}</option>}</For>
         </select>

packages/ui/src/styles/components/settings-screen.css

@@ -526,14 +526,49 @@
 @media (max-width: 640px) {
   .settings-screen-frame {
     padding: 0;
+    overflow: hidden;
   }
 
   .modal-surface.settings-screen-shell {
     width: 100%;
+    max-width: 100%;
     height: 100%;
     max-height: none;
     min-height: 100%;
     border-radius: 0;
+    overflow-x: hidden;
+  }
+
+  .modal-surface.settings-screen-shell .settings-screen-nav,
+  .modal-surface.settings-screen-shell .settings-screen-nav-list,
+  .modal-surface.settings-screen-shell .settings-screen-content,
+  .modal-surface.settings-screen-shell .settings-screen-scroll,
+  .modal-surface.settings-screen-shell .settings-section-stack,
+  .modal-surface.settings-screen-shell .settings-stack,
+  .modal-surface.settings-screen-shell .settings-card,
+  .modal-surface.settings-screen-shell .settings-card-content,
+  .modal-surface.settings-screen-shell .settings-toggle-row,
+  .modal-surface.settings-screen-shell .settings-toggle-row > * {
+    min-width: 0;
+  }
+
+  .modal-surface.settings-screen-shell .selector-trigger,
+  .modal-surface.settings-screen-shell .selector-input,
+  .modal-surface.settings-screen-shell .selector-button {
+    min-width: 0;
+    max-width: 100%;
+  }
+
+  .modal-surface.settings-screen-shell .settings-toggle-caption,
+  .modal-surface.settings-screen-shell .settings-inline-note,
+  .modal-surface.settings-screen-shell .remote-address-url,
+  .modal-surface.settings-screen-shell code {
+    overflow-wrap: anywhere;
+    word-break: break-word;
+  }
+
+  .modal-surface.settings-screen-shell .whitespace-nowrap {
+    white-space: normal;
   }
 
   .settings-screen-content-header,