UI – negate global form field width for host page filters; help text update (#16397)

## 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>
This commit is contained in:
Jacob Shandling 2024-01-29 10:31:13 -08:00 committed by GitHub
parent ad5748a857
commit 02ecb77172
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 6 additions and 9 deletions

View file

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

View file

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