Fleet UI: Flush Self-service search right without Install all button (#50534)

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.

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;
+      }
     }
   }
 

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>
   );