diff --git a/.betterer.results b/.betterer.results
index 17e26b00966..a217b42a0a5 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -3663,9 +3663,6 @@ exports[`better eslint`] = {
     "public/app/plugins/panel/annolist/AnnotationListItem.tsx:5381": [
       [0, 0, 0, "Add noMargin prop to Card components to remove built-in margins. Use layout components like Stack or Grid with the gap prop instead for consistent spacing.", "0"]
     ],
-    "public/app/plugins/panel/barchart/TickSpacingEditor.tsx:5381": [
-      [0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"]
-    ],
     "public/app/plugins/panel/barchart/bars.ts:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"]
     ],
@@ -3728,7 +3725,7 @@ exports[`better eslint`] = {
       [0, 0, 0, "Do not use any type assertions.", "0"]
     ],
     "public/app/plugins/panel/geomap/editor/StyleEditor.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, "Add noMargin prop to Field components to remove built-in margins. Use layout components like Stack or Grid with the gap prop instead for consistent spacing.", "0"],
       [0, 0, 0, "Add noMargin prop to Field components to remove built-in margins. Use layout components like Stack or Grid with the gap prop instead for consistent spacing.", "1"],
       [0, 0, 0, "Add noMargin prop to Field components to remove built-in margins. Use layout components like Stack or Grid with the gap prop instead for consistent spacing.", "2"],
       [0, 0, 0, "Add noMargin prop to Field components to remove built-in margins. Use layout components like Stack or Grid with the gap prop instead for consistent spacing.", "3"],
@@ -3742,7 +3739,7 @@ exports[`better eslint`] = {
       [0, 0, 0, "Add noMargin prop to Field components to remove built-in margins. Use layout components like Stack or Grid with the gap prop instead for consistent spacing.", "11"],
       [0, 0, 0, "Add noMargin prop to Field components to remove built-in margins. Use layout components like Stack or Grid with the gap prop instead for consistent spacing.", "12"],
       [0, 0, 0, "Add noMargin prop to Field components to remove built-in margins. Use layout components like Stack or Grid with the gap prop instead for consistent spacing.", "13"],
-      [0, 0, 0, "Add noMargin prop to Field components to remove built-in margins. Use layout components like Stack or Grid with the gap prop instead for consistent spacing.", "14"],
+      [0, 0, 0, "Do not use any type assertions.", "14"],
       [0, 0, 0, "Do not use any type assertions.", "15"],
       [0, 0, 0, "Do not use any type assertions.", "16"],
       [0, 0, 0, "Do not use any type assertions.", "17"],
@@ -3753,8 +3750,7 @@ exports[`better eslint`] = {
       [0, 0, 0, "Do not use any type assertions.", "22"],
       [0, 0, 0, "Do not use any type assertions.", "23"],
       [0, 0, 0, "Do not use any type assertions.", "24"],
-      [0, 0, 0, "Do not use any type assertions.", "25"],
-      [0, 0, 0, "Do not use any type assertions.", "26"]
+      [0, 0, 0, "Do not use any type assertions.", "25"]
     ],
     "public/app/plugins/panel/geomap/editor/StyleRuleEditor.tsx:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"]
@@ -3923,15 +3919,6 @@ exports[`better eslint`] = {
     "public/app/plugins/panel/text/textPanelMigrationHandler.ts:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
     ],
-    "public/app/plugins/panel/timeseries/InsertNullsEditor.tsx:5381": [
-      [0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"]
-    ],
-    "public/app/plugins/panel/timeseries/LineStyleEditor.tsx:5381": [
-      [0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"]
-    ],
-    "public/app/plugins/panel/timeseries/SpanNullsEditor.tsx:5381": [
-      [0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"]
-    ],
     "public/app/plugins/panel/timeseries/migrations.ts:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"],
       [0, 0, 0, "Do not use any type assertions.", "1"],
@@ -3956,8 +3943,7 @@ exports[`better eslint`] = {
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
     ],
     "public/app/plugins/panel/timeseries/plugins/annotations2/AnnotationTooltip2.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, "Unexpected any. Specify a different type.", "1"]
+      [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
     ],
     "public/app/plugins/panel/xychart/SeriesEditor.tsx:5381": [
       [0, 0, 0, "Add noMargin prop to Field components to remove built-in margins. Use layout components like Stack or Grid with the gap prop instead for consistent spacing.", "0"],
diff --git a/public/app/plugins/panel/barchart/TickSpacingEditor.tsx b/public/app/plugins/panel/barchart/TickSpacingEditor.tsx
index da553368a0f..3a6db390241 100644
--- a/public/app/plugins/panel/barchart/TickSpacingEditor.tsx
+++ b/public/app/plugins/panel/barchart/TickSpacingEditor.tsx
@@ -1,6 +1,6 @@
 import { SelectableValue, StandardEditorProps } from '@grafana/data';
 import { t } from '@grafana/i18n';
-import { Checkbox, HorizontalGroup, RadioButtonGroup, Tooltip } from '@grafana/ui';
+import { Checkbox, Stack, RadioButtonGroup, Tooltip } from '@grafana/ui';
 
 export const TickSpacingEditor = (props: StandardEditorProps<number>) => {
   const GAPS_OPTIONS: Array<SelectableValue<number>> = [
@@ -53,7 +53,7 @@ export const TickSpacingEditor = (props: StandardEditorProps<number>) => {
   };
 
   return (
-    <HorizontalGroup>
+    <Stack>
       <RadioButtonGroup value={gap.value} options={GAPS_OPTIONS} onChange={onSpacingChange} />
       {value !== 0 && (
         <Tooltip
@@ -68,6 +68,6 @@ export const TickSpacingEditor = (props: StandardEditorProps<number>) => {
           </div>
         </Tooltip>
       )}
-    </HorizontalGroup>
+    </Stack>
   );
 };
diff --git a/public/app/plugins/panel/geomap/editor/StyleEditor.tsx b/public/app/plugins/panel/geomap/editor/StyleEditor.tsx
index c8dd68c4acb..a880846f2b1 100644
--- a/public/app/plugins/panel/geomap/editor/StyleEditor.tsx
+++ b/public/app/plugins/panel/geomap/editor/StyleEditor.tsx
@@ -12,15 +12,7 @@ import {
   TextDimensionConfig,
   ScalarDimensionConfig,
 } from '@grafana/schema';
-import {
-  ColorPicker,
-  Field,
-  HorizontalGroup,
-  InlineField,
-  InlineFieldRow,
-  InlineLabel,
-  RadioButtonGroup,
-} from '@grafana/ui';
+import { ColorPicker, Field, Stack, InlineField, InlineFieldRow, InlineLabel, RadioButtonGroup } from '@grafana/ui';
 import { NumberValueEditor } from 'app/core/components/OptionsUI/number';
 import { SliderValueEditor } from 'app/core/components/OptionsUI/slider';
 import { ColorDimensionEditor } from 'app/features/dimensions/editors/ColorDimensionEditor';
@@ -364,7 +356,7 @@ export const StyleEditor = (props: Props) => {
 
       {hasTextLabel && (
         <>
-          <HorizontalGroup>
+          <Stack>
             <Field label={t('geomap.style-editor.label-font-size', 'Font size')}>
               <NumberValueEditor
                 id={fontSizeId}
@@ -392,7 +384,7 @@ export const StyleEditor = (props: Props) => {
                 item={{} as FieldConfigPropertyItem}
               />
             </Field>
-          </HorizontalGroup>
+          </Stack>
           <Field label={t('geomap.style-editor.label-align', 'Align')}>
             <RadioButtonGroup
               value={value?.textConfig?.textAlign ?? defaultStyleConfig.textConfig.textAlign}
diff --git a/public/app/plugins/panel/timeseries/InsertNullsEditor.tsx b/public/app/plugins/panel/timeseries/InsertNullsEditor.tsx
index dcd724f7057..4dbdc2d31e0 100644
--- a/public/app/plugins/panel/timeseries/InsertNullsEditor.tsx
+++ b/public/app/plugins/panel/timeseries/InsertNullsEditor.tsx
@@ -1,6 +1,6 @@
 import { StandardEditorProps, SelectableValue } from '@grafana/data';
 import { t } from '@grafana/i18n';
-import { HorizontalGroup, RadioButtonGroup } from '@grafana/ui';
+import { Stack, RadioButtonGroup } from '@grafana/ui';
 
 import { InputPrefix, NullsThresholdInput } from './NullsThresholdInput';
 
@@ -21,7 +21,7 @@ export const InsertNullsEditor = ({ value, onChange, item }: Props) => {
   DISCONNECT_OPTIONS[1].value = isThreshold ? value : 3600000; // 1h
 
   return (
-    <HorizontalGroup>
+    <Stack>
       <RadioButtonGroup value={value} options={DISCONNECT_OPTIONS} onChange={onChange} />
       {isThreshold && (
         <NullsThresholdInput
@@ -31,6 +31,6 @@ export const InsertNullsEditor = ({ value, onChange, item }: Props) => {
           isTime={item.settings?.isTime ?? false}
         />
       )}
-    </HorizontalGroup>
+    </Stack>
   );
 };
diff --git a/public/app/plugins/panel/timeseries/LineStyleEditor.tsx b/public/app/plugins/panel/timeseries/LineStyleEditor.tsx
index dc83dd1bfcb..d10fd52bea0 100644
--- a/public/app/plugins/panel/timeseries/LineStyleEditor.tsx
+++ b/public/app/plugins/panel/timeseries/LineStyleEditor.tsx
@@ -3,7 +3,7 @@ import { useMemo } from 'react';
 import { StandardEditorProps, SelectableValue } from '@grafana/data';
 import { t } from '@grafana/i18n';
 import { LineStyle } from '@grafana/schema';
-import { HorizontalGroup, IconButton, RadioButtonGroup, Select } from '@grafana/ui';
+import { IconButton, RadioButtonGroup, Select, Stack } from '@grafana/ui';
 
 type LineFill = 'solid' | 'dash' | 'dot';
 
@@ -72,7 +72,7 @@ export const LineStyleEditor = ({ value, onChange }: Props) => {
   }, [value, options]);
 
   return (
-    <HorizontalGroup>
+    <Stack wrap={true} alignItems="flex-end">
       <RadioButtonGroup
         value={value?.fill || 'solid'}
         options={lineFillOptions}
@@ -121,7 +121,7 @@ export const LineStyleEditor = ({ value, onChange }: Props) => {
           </div>
         </>
       )}
-    </HorizontalGroup>
+    </Stack>
   );
 };
 
diff --git a/public/app/plugins/panel/timeseries/SpanNullsEditor.tsx b/public/app/plugins/panel/timeseries/SpanNullsEditor.tsx
index 558580299a4..0ced4d554ae 100644
--- a/public/app/plugins/panel/timeseries/SpanNullsEditor.tsx
+++ b/public/app/plugins/panel/timeseries/SpanNullsEditor.tsx
@@ -1,6 +1,6 @@
 import { StandardEditorProps, SelectableValue } from '@grafana/data';
 import { t } from '@grafana/i18n';
-import { HorizontalGroup, RadioButtonGroup } from '@grafana/ui';
+import { Stack, RadioButtonGroup } from '@grafana/ui';
 
 import { InputPrefix, NullsThresholdInput } from './NullsThresholdInput';
 
@@ -25,7 +25,7 @@ export const SpanNullsEditor = ({ value, onChange, item }: Props) => {
   GAPS_OPTIONS[2].value = isThreshold ? value : 3600000; // 1h
 
   return (
-    <HorizontalGroup>
+    <Stack wrap={true}>
       <RadioButtonGroup value={value} options={GAPS_OPTIONS} onChange={onChange} />
       {isThreshold && (
         <NullsThresholdInput
@@ -35,6 +35,6 @@ export const SpanNullsEditor = ({ value, onChange, item }: Props) => {
           isTime={item.settings?.isTime ?? false}
         />
       )}
-    </HorizontalGroup>
+    </Stack>
   );
 };
diff --git a/public/app/plugins/panel/timeseries/plugins/annotations2/AnnotationTooltip2.tsx b/public/app/plugins/panel/timeseries/plugins/annotations2/AnnotationTooltip2.tsx
index 33d6eb0e013..018aff532f8 100644
--- a/public/app/plugins/panel/timeseries/plugins/annotations2/AnnotationTooltip2.tsx
+++ b/public/app/plugins/panel/timeseries/plugins/annotations2/AnnotationTooltip2.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 
 import { GrafanaTheme2, dateTimeFormat, systemDateFormats, textUtil } from '@grafana/data';
 import { t } from '@grafana/i18n';
-import { HorizontalGroup, IconButton, Tag, usePanelContext, useStyles2 } from '@grafana/ui';
+import { Stack, IconButton, Tag, usePanelContext, useStyles2 } from '@grafana/ui';
 import alertDef from 'app/features/alerting/state/alertDef';
 
 interface Props {
@@ -65,7 +65,7 @@ export const AnnotationTooltip2 = ({ annoVals, annoIdx, timeZone, onEdit }: Prop
   return (
     <div className={styles.wrapper}>
       <div className={styles.header}>
-        <HorizontalGroup justify={'space-between'} align={'center'} spacing={'md'}>
+        <Stack gap={2} basis="100%" justifyContent="space-between" alignItems="center">
           <div className={styles.meta}>
             <span>
               {avatar}
@@ -93,18 +93,18 @@ export const AnnotationTooltip2 = ({ annoVals, annoIdx, timeZone, onEdit }: Prop
               )}
             </div>
           )}
-        </HorizontalGroup>
+        </Stack>
       </div>
 
       <div className={styles.body}>
         {text && <div className={styles.text} dangerouslySetInnerHTML={{ __html: textUtil.sanitize(text) }} />}
         {alertText}
         <div>
-          <HorizontalGroup spacing="xs" wrap>
+          <Stack gap={0.5} wrap={true}>
             {annoVals.tags?.[annoIdx]?.map((t: string, i: number) => (
               <Tag name={t} key={`${t}-${i}`} />
             ))}
-          </HorizontalGroup>
+          </Stack>
         </div>
       </div>
     </div>
@@ -131,13 +131,11 @@ const getStyles = (theme: GrafanaTheme2) => ({
   }),
   meta: css({
     display: 'flex',
-    justifyContent: 'space-between',
     color: theme.colors.text.primary,
     fontWeight: 400,
   }),
   editControls: css({
     display: 'flex',
-    alignItems: 'center',
     '> :last-child': {
       marginLeft: 0,
     },