From 24dd3a777c4a15c65fca62f5becb4482143828a4 Mon Sep 17 00:00:00 2001
From: Will Miao <willmiao.dev@gmail.com>
Date: Sun, 19 Apr 2026 21:59:33 +0800
Subject: [PATCH] fix(settings): align modal form control widths

---
 .../css/components/modal/settings-modal.css   | 22 ++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/static/css/components/modal/settings-modal.css b/static/css/components/modal/settings-modal.css
index 7a1f4902..a0f960b0 100644
--- a/static/css/components/modal/settings-modal.css
+++ b/static/css/components/modal/settings-modal.css
@@ -346,11 +346,13 @@
 .api-key-input input {
     width: 100%;
     padding: 6px 40px 6px 10px; /* Add left padding */
-    height: 20px;
+    height: 32px;
+    box-sizing: border-box;
     border-radius: var(--border-radius-xs);
     border: 1px solid var(--border-color);
     background-color: var(--lora-surface);
     color: var(--text-color);
+    font-size: 0.95em;
 }
 
 .api-key-input .toggle-visibility {
@@ -379,7 +381,8 @@
 .text-input-wrapper input {
     width: 100%;
     padding: 6px 10px;
-    height: 20px;
+    height: 32px;
+    box-sizing: border-box;
     border-radius: var(--border-radius-xs);
     border: 1px solid var(--border-color);
     background-color: var(--lora-surface);
@@ -760,10 +763,12 @@
 }
 
 .setting-control {
-    width: 60%; /* Decreased slightly from 65% */
+    flex: 0 0 60%;
+    max-width: 60%;
     margin-bottom: 0;
     display: flex;
     justify-content: flex-end; /* Right-align all controls */
+    min-width: 0;
 }
 
 /* Select Control Styles */
@@ -773,6 +778,13 @@
     justify-content: flex-end;
 }
 
+.setting-control select,
+.setting-control input[type="text"],
+.setting-control input[type="password"],
+.setting-control input[type="number"] {
+    font-size: 0.95em;
+}
+
 .select-control select {
     width: 100%;
     max-width: 100%; /* Increased from 200px */
@@ -781,8 +793,8 @@
     border: 1px solid var(--border-color);
     background-color: var(--lora-surface);
     color: var(--text-color);
-    font-size: 0.95em;
     height: 32px;
+    box-sizing: border-box;
 }
 
 /* Fix dark theme select dropdown text color */
@@ -888,8 +900,8 @@ input:checked + .toggle-slider:before {
     border: 1px solid var(--border-color);
     background-color: var(--lora-surface);
     color: var(--text-color);
-    font-size: 0.95em;
     height: 32px;
+    box-sizing: border-box;
 }
 
 /* Add warning text style for settings */