From a1b35aeb233f5aa54738261794b88c4f65c4c896 Mon Sep 17 00:00:00 2001
From: Magnus Jensen <magnus@fleetdm.com>
Date: Thu, 30 Jul 2026 14:21:08 +0200
Subject: [PATCH] fix icon text gap across product (#50209)

<!-- Add the related story/sub-task/bug number, like Resolves #123, or
remove if NA -->
**Related issue:** Resolves #48217

This does update a couple of places, but I checked and it should only be
for Status indicators.
Figma spec with 4px rather than 8px:
https://www.figma.com/design/gxvU745LfOdkE9AuRg64wi/%F0%9F%A7%A9-Product-design-system?node-id=858-23&t=QwTqGmpK0V3inArL-0

<img width="1119" height="407" alt="image"
src="https://github.com/user-attachments/assets/8cae52d6-dbb9-4b8d-80d6-1a899790ad82"
/>


# Checklist for submitter

If some of the following don't apply, delete the relevant line.

- [x] Changes file added for user-visible changes in `changes/`,
`orbit/changes/` or `ee/fleetd-chrome/changes`.
See [Changes
files](https://github.com/fleetdm/fleet/blob/main/docs/Contributing/guides/committing-changes.md#changes-files)
for more information.

- [x] Input data is properly validated, `SELECT *` is avoided, SQL
injection is prevented (using placeholders for values in statements), JS
inline code is prevented especially for url redirects, and untrusted
data interpolated into shell scripts/commands is validated against shell
metacharacters.
- [x] Timeouts are implemented and retries are limited to avoid infinite
loops
- [x] If paths of existing endpoints are modified without backwards
compatibility, checked the frontend/CLI for any necessary changes

## Testing

- [ ] Added/updated automated tests
- [x] QA'd all new/changed functionality manually

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Bug Fixes**
* Reduced the spacing between icons and text for a more compact,
consistent layout across the product.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 changes/48217-fix-icon-text-gap  | 1 +
 frontend/styles/var/padding.scss | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)
 create mode 100644 changes/48217-fix-icon-text-gap

diff --git a/changes/48217-fix-icon-text-gap b/changes/48217-fix-icon-text-gap
new file mode 100644
index 0000000000..1e4e789cd6
--- /dev/null
+++ b/changes/48217-fix-icon-text-gap
@@ -0,0 +1 @@
+- Fixed styling issues with gap between icons and text across the product.
\ No newline at end of file
diff --git a/frontend/styles/var/padding.scss b/frontend/styles/var/padding.scss
index f54d2fafed..6cbddc7922 100644
--- a/frontend/styles/var/padding.scss
+++ b/frontend/styles/var/padding.scss
@@ -22,5 +22,5 @@ $gap-data-sets: $pad-medium;
 $gap-table-elements: $pad-small;
 $gap-action-elements: $pad-small;
 $gap-modal-component: $pad-large;
-$gap-icon-text: $pad-small;
+$gap-icon-text: $pad-xsmall;
 $table-cell-padding: $pad-large;