From 02ecb771725cac900ac052bd58ea77ae9b262446 Mon Sep 17 00:00:00 2001
From: Jacob Shandling <61553566+jacobshandling@users.noreply.github.com>
Date: Mon, 29 Jan 2024 10:31:13 -0800
Subject: [PATCH] =?UTF-8?q?UI=20=E2=80=93=C2=A0negate=20global=20form=20fi?=
 =?UTF-8?q?eld=20width=20for=20host=20page=20filters;=20help=20text=20upda?=
 =?UTF-8?q?te=20(#16397)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Follow-up to #16159 - part of form field spot checks

- Negate `.form-field {width: 100%}` for `.form-field`s used within the
manage hosts page filter block

<img width="1276" alt="Screenshot 2024-01-26 at 6 10 58 PM"
src="https://github.com/fleetdm/fleet/assets/61553566/da0b4de0-6131-4e84-adca-86d48c1335f3">
<img width="1276" alt="Screenshot 2024-01-26 at 6 10 01 PM"
src="https://github.com/fleetdm/fleet/assets/61553566/9076a04f-946f-461a-b279-1efba26e7caf">
<img width="1276" alt="Screenshot 2024-01-26 at 6 50 40 PM"
src="https://github.com/fleetdm/fleet/assets/61553566/0faa4329-727b-4031-8d1a-2259487ce957">


Follow form field help text pattern in edit team modal
<img width="654" alt="Screenshot 2024-01-26 at 4 50 58 PM"
src="https://github.com/fleetdm/fleet/assets/61553566/fbd8b736-cabf-468e-8270-3d1f3257d905">
# Checklist for submitter

- [x] Manual QA for all new/changed functionality

---------

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
---
 .../components/EditTeamModal/EditTeamModal.tsx         |  5 +----
 .../components/HostsFilterBlock/_styles.scss           | 10 +++++-----
 2 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/frontend/pages/admin/IntegrationsPage/cards/AutomaticEnrollment/components/EditTeamModal/EditTeamModal.tsx b/frontend/pages/admin/IntegrationsPage/cards/AutomaticEnrollment/components/EditTeamModal/EditTeamModal.tsx
index 96dcfb0dd9..66c4ade51c 100644
--- a/frontend/pages/admin/IntegrationsPage/cards/AutomaticEnrollment/components/EditTeamModal/EditTeamModal.tsx
+++ b/frontend/pages/admin/IntegrationsPage/cards/AutomaticEnrollment/components/EditTeamModal/EditTeamModal.tsx
@@ -67,11 +67,8 @@ const EditTeamModal = ({
             onChange={setSelectedTeam}
             value={selectedTeam}
             label="Team"
+            helpText="macOS hosts will be added to this team when they're first unboxed."
           />
-          <p>
-            macOS hosts will be added to this team when they&apos;re first
-            unboxed.
-          </p>
         </div>
         <div className="modal-cta-wrap">
           <Button type="submit" variant="brand" isLoading={isLoading}>
diff --git a/frontend/pages/hosts/ManageHostsPage/components/HostsFilterBlock/_styles.scss b/frontend/pages/hosts/ManageHostsPage/components/HostsFilterBlock/_styles.scss
index a1072ad6cc..1df7fbc364 100644
--- a/frontend/pages/hosts/ManageHostsPage/components/HostsFilterBlock/_styles.scss
+++ b/frontend/pages/hosts/ManageHostsPage/components/HostsFilterBlock/_styles.scss
@@ -4,12 +4,12 @@
     align-items: center;
     margin-bottom: $pad-small;
     gap: $pad-small; // between multiple filter pills
-  }
 
-  // NOTE: can probably be removed and placed anytime we have a dropdown. Need to
-  // go through other filter dropdowns and see if thats the case
-  &__policies-filter-pill {
-    margin-left: $pad-medium;
+    .form-field {
+      // negate global .form-field {width: 100%} for use of Dropdown
+      // and other "form-fields" in the filter block
+      width: initial;
+    }
   }
 
   // NOTE: Look more into this styling