From 06a5c970c4e84522e4d3f22c61e249fe20f1ce9b Mon Sep 17 00:00:00 2001
From: Leon Sorokin <leeoniya@gmail.com>
Date: Mon, 22 Jul 2024 15:52:36 -0500
Subject: [PATCH] VizTooltip: Wrap labels to new lines when > ~50% screen width
 (#90798)

---
 .../grafana-ui/src/components/VizTooltip/VizTooltipRow.tsx  | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/grafana-ui/src/components/VizTooltip/VizTooltipRow.tsx b/packages/grafana-ui/src/components/VizTooltip/VizTooltipRow.tsx
index 2fbb00c0fe2..7d7cdf9504f 100644
--- a/packages/grafana-ui/src/components/VizTooltip/VizTooltipRow.tsx
+++ b/packages/grafana-ui/src/components/VizTooltip/VizTooltipRow.tsx
@@ -27,6 +27,7 @@ enum LabelValueTypes {
 
 const SUCCESSFULLY_COPIED_TEXT = 'Copied to clipboard';
 const SHOW_SUCCESS_DURATION = 2 * 1000;
+const HORIZONTAL_PX_PER_CHAR = 7;
 
 export const VizTooltipRow = ({
   label,
@@ -120,6 +121,11 @@ export const VizTooltipRow = ({
 
   const onMouseLeaveLabel = () => setShowLabelTooltip(false);
 
+  // if label is > 50% window width, try to put label/value pairs on new lines
+  if (label.length * HORIZONTAL_PX_PER_CHAR > window.innerWidth / 2) {
+    label = label.replaceAll('{', '{\n  ').replaceAll('}', '\n}').replaceAll(', ', ',\n  ');
+  }
+
   return (
     <div className={styles.contentWrapper}>
       {(color || label) && (