From 5674f2ea45ef247c8f9f9c5c65f85565d1060619 Mon Sep 17 00:00:00 2001
From: nessi <sascha@nesterovic.cc>
Date: Thu, 12 Feb 2026 13:52:12 +0100
Subject: [PATCH] Fix redundant CSS class usage and enhance toggle-field layout

Removed the unnecessary "field-full" class from toggle-field divs in TargetsPage.jsx to simplify the layout. Updated styles.css to refine the toggle-field alignment and introduced a max-width for better control of toggle-check elements.
---
 frontend/src/pages/TargetsPage.jsx | 4 ++--
 frontend/src/styles.css            | 5 +++++
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/frontend/src/pages/TargetsPage.jsx b/frontend/src/pages/TargetsPage.jsx
index 66b4415..867c16f 100644
--- a/frontend/src/pages/TargetsPage.jsx
+++ b/frontend/src/pages/TargetsPage.jsx
@@ -200,7 +200,7 @@ export function TargetsPage() {
                 If you see "rejected SSL upgrade", switch to <code>disable</code>.
               </small>
             </div>
-            <div className="field field-full toggle-field">
+            <div className="field toggle-field">
               <label>Query Insights Source</label>
               <label className="toggle-check">
                 <input
@@ -266,7 +266,7 @@ export function TargetsPage() {
                 <option value="require">require</option>
               </select>
             </div>
-            <div className="field field-full toggle-field">
+            <div className="field toggle-field">
               <label>Query Insights Source</label>
               <label className="toggle-check">
                 <input
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 019d212..1e12f61 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -319,6 +319,11 @@ button {
 
 .toggle-field {
   margin-top: 2px;
+  align-self: end;
+}
+
+.toggle-field .toggle-check {
+  max-width: 520px;
 }
 
 .tips p {