From b4fc741c3d16ebe8ce0bd006528ac01909e8b47d Mon Sep 17 00:00:00 2001
From: Val Alexander <bunsthedev@gmail.com>
Date: Wed, 18 Mar 2026 00:14:11 -0500
Subject: [PATCH] UI: fix config raw-toggle button sizing and semantic markup

---
 ui/src/styles/config.css  | 7 +++++++
 ui/src/ui/views/config.ts | 7 +++----
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/ui/src/styles/config.css b/ui/src/styles/config.css
index f3d76ab2e6e..88aa484dde0 100644
--- a/ui/src/styles/config.css
+++ b/ui/src/styles/config.css
@@ -715,6 +715,13 @@
   line-height: 1.55;
 }
 
+.config-raw-toggle {
+  width: 32px;
+  height: 32px;
+  padding: 6px !important;
+  min-width: 32px;
+}
+
 /* Loading State */
 .config-loading {
   display: flex;
diff --git a/ui/src/ui/views/config.ts b/ui/src/ui/views/config.ts
index 1ec032e352f..7c1121e6bb8 100644
--- a/ui/src/ui/views/config.ts
+++ b/ui/src/ui/views/config.ts
@@ -1060,7 +1060,7 @@ export function renderConfig(props: ConfigProps) {
                           `
                         : nothing
                     }
-                    <label class="field config-raw-field">
+                    <div class="field config-raw-field">
                       <span style="display:flex;align-items:center;gap:8px;">
                         Raw JSON5
                         ${
@@ -1068,8 +1068,7 @@ export function renderConfig(props: ConfigProps) {
                             ? html`
                               <span class="pill pill--sm">${sensitiveCount} secret${sensitiveCount === 1 ? "" : "s"} ${blurred ? "redacted" : "visible"}</span>
                               <button
-                                class="btn btn--icon ${blurred ? "" : "active"}"
-                                style="width:28px;height:28px;padding:0;"
+                                class="btn btn--icon config-raw-toggle ${blurred ? "" : "active"}"
                                 title=${
                                   blurred ? "Reveal sensitive values" : "Hide sensitive values"
                                 }
@@ -1098,7 +1097,7 @@ export function renderConfig(props: ConfigProps) {
                           props.onRawChange((e.target as HTMLTextAreaElement).value);
                         }}
                       ></textarea>
-                    </label>
+                    </div>
                   `;
                   })()
           }