Chore: `ActionRow` - Replace `HorizontalGroup` with `Stack` (#86143)

.betterer.results

@@ -4039,9 +4039,8 @@ exports[`better eslint`] = {
       [0, 0, 0, "\'VerticalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"]
     ],
     "public/app/features/search/page/components/ActionRow.tsx:5381": [
-      [0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"],
-      [0, 0, 0, "Styles should be written using objects.", "1"],
-      [0, 0, 0, "Styles should be written using objects.", "2"]
+      [0, 0, 0, "Styles should be written using objects.", "0"],
+      [0, 0, 0, "Styles should be written using objects.", "1"]
     ],
     "public/app/features/search/page/components/SearchResultsTable.tsx:5381": [
       [0, 0, 0, "Styles should be written using objects.", "0"],

public/app/features/search/page/components/ActionRow.tsx

@@ -3,7 +3,7 @@ import React, { FormEvent } from 'react';
 
 import { GrafanaTheme2, SelectableValue } from '@grafana/data';
 import { config } from '@grafana/runtime';
-import { Button, Checkbox, HorizontalGroup, RadioButtonGroup, useStyles2 } from '@grafana/ui';
+import { Button, Checkbox, Stack, RadioButtonGroup, useStyles2 } from '@grafana/ui';
 import { SortPicker } from 'app/core/components/Select/SortPicker';
 import { TagFilter, TermCount } from 'app/core/components/TagFilter/TagFilter';
 import { t, Trans } from 'app/core/internationalization';
@@ -77,7 +77,7 @@ export const ActionRow = ({
 
   return (
     <div className={styles.actionRow}>
-      <HorizontalGroup spacing="md" width="auto">
+      <Stack gap={2} alignItems="center">
         <TagFilter isClearable={false} tags={state.tag} tagOptions={getTagOptions} onChange={onTagFilterChange} />
         {config.featureToggles.panelTitleSearch && (
           <Checkbox
@@ -110,9 +110,9 @@ export const ActionRow = ({
             Panel: {state.panel_type}
           </Button>
         )}
-      </HorizontalGroup>
+      </Stack>
 
-      <HorizontalGroup spacing="md" width="auto">
+      <Stack gap={2}>
         {!hideLayout && (
           <RadioButtonGroup
             options={getLayoutOptions()}
@@ -128,7 +128,7 @@ export const ActionRow = ({
           placeholder={sortPlaceholder || t('search.actions.sort-placeholder', 'Sort')}
           isClearable
         />
-      </HorizontalGroup>
+      </Stack>
     </div>
   );
 };