UI: fix config raw-toggle button sizing and semantic markup

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;

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>
                   `;
                   })()
           }