From d886acb0ca9dd7daa9e7cc0e1da501ee80f69968 Mon Sep 17 00:00:00 2001
From: jacobshandling <61553566+jacobshandling@users.noreply.github.com>
Date: Wed, 17 Sep 2025 14:18:22 -0700
Subject: [PATCH] Improve the layout of the IdP-driven label form (#33092)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## For #32340

<img width="1134" height="738" alt="Screenshot 2025-09-16 at 5 16 44 PM"
src="https://github.com/user-attachments/assets/3a4123c4-49d7-49b3-869f-e9c12aa6f0dc"
/>


- [x] Changes file added for user-visible changes in `changes/
- [x] QA'd all new/changed functionality manually

---------

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
---
 changes/32340-idp-label-fields-padding        |  1 +
 .../labels/NewLabelPage/NewLabelPage.tsx      | 57 +++++++++++--------
 .../pages/labels/NewLabelPage/_styles.scss    | 15 +++--
 3 files changed, 42 insertions(+), 31 deletions(-)
 create mode 100644 changes/32340-idp-label-fields-padding

diff --git a/changes/32340-idp-label-fields-padding b/changes/32340-idp-label-fields-padding
new file mode 100644
index 0000000000..353cea669d
--- /dev/null
+++ b/changes/32340-idp-label-fields-padding
@@ -0,0 +1 @@
+* Improve the layout of the IdP-driven label form
\ No newline at end of file
diff --git a/frontend/pages/labels/NewLabelPage/NewLabelPage.tsx b/frontend/pages/labels/NewLabelPage/NewLabelPage.tsx
index bd0c5b24c3..5d82fbc676 100644
--- a/frontend/pages/labels/NewLabelPage/NewLabelPage.tsx
+++ b/frontend/pages/labels/NewLabelPage/NewLabelPage.tsx
@@ -426,31 +426,38 @@ const NewLabelPage = ({
       case "host_vitals":
         return (
           <div className={`${baseClass}__host_vitals-fields`}>
-            <Dropdown
-              label="Label criteria"
-              name="vital"
-              onChange={onInputChange}
-              parseTarget
-              value={vital}
-              error={formErrors.criteria}
-              options={availableCriteria}
-              classname={`${baseClass}__criteria-dropdown`}
-              wrapperClassName={`${baseClass}__form-field ${baseClass}__form-field--criteria`}
-              helpText="Currently, label criteria can be IdP group or department on macOS hosts."
-            />
-            <p>is equal to</p>
-            <InputField
-              error={formErrors.criteria}
-              name="vitalValue"
-              onChange={onInputChange}
-              onBlur={onInputBlur}
-              value={vitalValue}
-              inputClassName={`${baseClass}__vital-value`}
-              placeholder={
-                vital === "end_user_idp_group" ? "IT admins" : "Engineering"
-              }
-              parseTarget
-            />
+            <label className="form-field__label" htmlFor="criterion-and-value">
+              Label criteria
+            </label>
+            <span id="criterion-and-value">
+              <Dropdown
+                name="vital"
+                onChange={onInputChange}
+                parseTarget
+                value={vital}
+                error={formErrors.criteria}
+                options={availableCriteria}
+                classname={`${baseClass}__criteria-dropdown`}
+                wrapperClassName={`${baseClass}__form-field ${baseClass}__form-field--criteria`}
+              />
+              <p>is equal to</p>
+              <InputField
+                error={formErrors.criteria}
+                name="vitalValue"
+                onChange={onInputChange}
+                onBlur={onInputBlur}
+                value={vitalValue}
+                inputClassName={`${baseClass}__vital-value`}
+                placeholder={
+                  vital === "end_user_idp_group" ? "IT admins" : "Engineering"
+                }
+                parseTarget
+              />
+            </span>
+            <span className="form-field__help-text">
+              Currently, label criteria can be IdP group or department on macOS
+              hosts.
+            </span>
           </div>
         );
 
diff --git a/frontend/pages/labels/NewLabelPage/_styles.scss b/frontend/pages/labels/NewLabelPage/_styles.scss
index 9358b9ee76..f9c1178ee2 100644
--- a/frontend/pages/labels/NewLabelPage/_styles.scss
+++ b/frontend/pages/labels/NewLabelPage/_styles.scss
@@ -41,13 +41,16 @@
   &__host_vitals-fields {
     width: auto;
     display: flex;
-    align-items: center;
-    gap: $pad-medium;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: $pad-small;
+
+    #criterion-and-value {
+      display: flex;
+      align-items: center;
+      gap: $pad-medium;
+    }
     .form-field--dropdown {
-      margin-right: -14px;
-      .form-field__help-text {
-        white-space: nowrap;
-      }
       .Select {
         width: 300px;
       }