From 8d616e31cb77312dfcd2920d007e194b948efcbe Mon Sep 17 00:00:00 2001
From: RachelElysia <71795832+RachelElysia@users.noreply.github.com>
Date: Wed, 5 Aug 2026 09:15:15 -0700
Subject: [PATCH] Fleet UI: Flush Self-service search right without Install all
 button (#50534)

---
 changes/50532-self-service-header-gap         |  1 +
 .../cards/Software/SelfService/_styles.scss   | 19 +++++++++++++-----
 .../SelfServiceFilters/SelfServiceFilters.tsx | 20 ++++++++++---------
 3 files changed, 26 insertions(+), 14 deletions(-)
 create mode 100644 changes/50532-self-service-header-gap

diff --git a/changes/50532-self-service-header-gap b/changes/50532-self-service-header-gap
new file mode 100644
index 0000000000..9bbfed5608
--- /dev/null
+++ b/changes/50532-self-service-header-gap
@@ -0,0 +1 @@
+* Fixed the My device > Self-service search bar not sitting flush right when the "Install all" button isn't rendered.
diff --git a/frontend/pages/hosts/details/cards/Software/SelfService/_styles.scss b/frontend/pages/hosts/details/cards/Software/SelfService/_styles.scss
index 8f6a62d0b3..99398d634f 100644
--- a/frontend/pages/hosts/details/cards/Software/SelfService/_styles.scss
+++ b/frontend/pages/hosts/details/cards/Software/SelfService/_styles.scss
@@ -28,11 +28,12 @@
     gap: $pad-medium;
     align-items: center;
 
-    // Pushes the install-all button (and any following siblings) to the right
-    // edge whether or not CategoryFilter renders on the left. Works at all
-    // widths — on the narrow layout below it keeps Install all flush right on
-    // row 2.
-    &__install-all {
+    // Groups Install all + Search on the right of CategoryFilter with a
+    // tighter internal gap than the parent's $pad-medium.
+    &__actions {
+      display: flex;
+      align-items: center;
+      gap: $pad-small;
       margin-left: auto;
     }
 
@@ -47,10 +48,18 @@
   // remaining Install all + Search comfortably fit on one row at any width.
   &__header-filters--with-categories {
     @media (max-width: ($break-sm - 1)) {
+      // Unwrap __actions so Search and Install all reorder as direct
+      // siblings of __header-filters for the split-row layout.
+      .software-self-service__header-filters__actions {
+        display: contents;
+      }
       .software-self-service__header-filters__search {
         order: -1;
         flex-basis: 100%;
       }
+      .software-self-service__header-filters__install-all {
+        margin-left: auto;
+      }
     }
   }
 
diff --git a/frontend/pages/hosts/details/cards/Software/SelfService/components/SelfServiceFilters/SelfServiceFilters.tsx b/frontend/pages/hosts/details/cards/Software/SelfService/components/SelfServiceFilters/SelfServiceFilters.tsx
index 4957e9ae24..f176108482 100644
--- a/frontend/pages/hosts/details/cards/Software/SelfService/components/SelfServiceFilters/SelfServiceFilters.tsx
+++ b/frontend/pages/hosts/details/cards/Software/SelfService/components/SelfServiceFilters/SelfServiceFilters.tsx
@@ -43,15 +43,17 @@ const SelfServiceFilters = ({
           onChange={onCategoryChange}
         />
       )}
-      {installAllSlot && (
-        <div className={`${baseClass}__install-all`}>{installAllSlot}</div>
-      )}
-      <div className={`${baseClass}__search`}>
-        <SearchField
-          placeholder="Search by name"
-          onChange={onSearchQueryChange}
-          defaultValue={query}
-        />
+      <div className={`${baseClass}__actions`}>
+        {installAllSlot && (
+          <div className={`${baseClass}__install-all`}>{installAllSlot}</div>
+        )}
+        <div className={`${baseClass}__search`}>
+          <SearchField
+            placeholder="Search by name"
+            onChange={onSearchQueryChange}
+            defaultValue={query}
+          />
+        </div>
       </div>
     </div>
   );