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 && ( -