Improve the layout of the IdP-driven label form (#33092)

## 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

@@ -0,0 +1 @@
+* Improve the layout of the IdP-driven label form

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>
         );
 

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;
       }