UI – apply grid gap in both directions in 'Edit column modal' (#16421)

## Addresses #16418 
<img width="808" alt="Screenshot 2024-01-29 at 10 55 40 AM"
src="https://github.com/fleetdm/fleet/assets/61553566/6142337f-b781-4670-a1b3-f2bb5d225e7a">


- [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 11:12:21 -08:00 committed by GitHub
parent 02ecb77172
commit ed0346e250
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 4 additions and 4 deletions

View File

@ -61,7 +61,7 @@ const EditColumnsModal = ({
return (
<Modal title="Edit columns" onExit={onCancelColumns} className={baseClass}>
<>
<div className="form">
<p>Choose which columns you see:</p>
<div className={`${baseClass}__column-headers`}>
{columnItems.map((column) => {
@ -90,7 +90,7 @@ const EditColumnsModal = ({
Cancel
</Button>
</div>
</>
</div>
</Modal>
);
};

View File

@ -1,7 +1,7 @@
.edit-columns-modal {
&__column-headers {
display: grid;
grid-template-columns: 1fr 1fr ;
grid-column-gap: $pad-medium;
grid-template-columns: 1fr 1fr;
gap: $pad-medium;
}
}