From cff743fcd56a2cf17b6e2e640dd6ffb53e8eba07 Mon Sep 17 00:00:00 2001
From: Jesse David Peterson <jesdavpet@users.noreply.github.com>
Date: Tue, 24 Jun 2025 14:08:27 -0400
Subject: [PATCH] ToolTip: Fix flexbox bug with tooltip when `maxWidth` is set
 manually (#107145)

Fix flexbox bug with tooltip when maxWidth is set manually.

fix for #105517

Co-authored-by: Jason <jdmarshall@users.noreply.github.com>
---
 .../components/VizTooltip/VizTooltipColorIndicator.tsx   | 2 ++
 .../src/components/VizTooltip/VizTooltipRow.tsx          | 9 ++++++++-
 2 files changed, 10 insertions(+), 1 deletion(-)

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,