diff --git a/packages/grafana-ui/src/components/VizTooltip/VizTooltipColorIndicator.tsx b/packages/grafana-ui/src/components/VizTooltip/VizTooltipColorIndicator.tsx
index 34c251eee13..023bebe4048 100644
--- a/packages/grafana-ui/src/components/VizTooltip/VizTooltipColorIndicator.tsx
+++ b/packages/grafana-ui/src/components/VizTooltip/VizTooltipColorIndicator.tsx
@@ -56,9 +56,11 @@ export const VizTooltipColorIndicator = ({
 const getStyles = (theme: GrafanaTheme2) => ({
   leading: css({
     marginRight: theme.spacing(0.5),
+    flex: 'none',
   }),
   trailing: css({
     marginLeft: theme.spacing(0.5),
+    flex: 'none',
   }),
   value: css({
     width: '12px',
diff --git a/packages/grafana-ui/src/components/VizTooltip/VizTooltipRow.tsx b/packages/grafana-ui/src/components/VizTooltip/VizTooltipRow.tsx
index 3babe63b17c..8933596184a 100644
--- a/packages/grafana-ui/src/components/VizTooltip/VizTooltipRow.tsx
+++ b/packages/grafana-ui/src/components/VizTooltip/VizTooltipRow.tsx
@@ -129,7 +129,7 @@ export const VizTooltipRow = ({
   return (
     <div className={styles.contentWrapper}>
       {(color || label) && (
-        <div className={styles.valueWrapper}>
+        <div className={styles.labelWrapper}>
           {color && colorPlacement === ColorPlacement.first && (
             <VizTooltipColorIndicator color={color} colorIndicator={colorIndicator} lineStyle={lineStyle} />
           )}
@@ -221,6 +221,12 @@ const getStyles = (theme: GrafanaTheme2, justify: string, marginRight: string) =
     overflow: 'hidden',
     marginRight: theme.spacing(2),
   }),
+  labelWrapper: css({
+    display: 'flex',
+    alignItems: 'center',
+    flex: '2',
+    minWidth: 0,
+  }),
   value: css({
     fontWeight: 500,
     textOverflow: 'ellipsis',
@@ -229,6 +235,7 @@ const getStyles = (theme: GrafanaTheme2, justify: string, marginRight: string) =
   valueWrapper: css({
     display: 'flex',
     alignItems: 'center',
+    flex: '1',
   }),
   activeSeries: css({
     fontWeight: theme.typography.fontWeightBold,