BarGauge: Limit title width when name is really long (#42346)

packages/grafana-ui/src/components/BarGauge/BarGauge.test.tsx

@@ -218,9 +218,7 @@ describe('BarGauge', () => {
       const styles = getTitleStyles(props);
       expect(styles.wrapper.flexDirection).toBe('column');
     });
-  });
 
-  describe('Horizontal bar with title', () => {
     it('should place below if height < 40', () => {
       const props = getProps({
         height: 30,
@@ -249,6 +247,19 @@ describe('BarGauge', () => {
       expect(styles2.title.width).toBe('43px');
     });
 
+    it('Should limit text length to 40%', () => {
+      const props = getProps({
+        height: 30,
+        value: getValue(
+          100,
+          'saaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa'
+        ),
+        orientation: VizOrientation.Horizontal,
+      });
+      const styles = getTitleStyles(props);
+      expect(styles.title.width).toBe('119px');
+    });
+
     it('should use alignmentFactors if provided', () => {
       const props = getProps({
         height: 30,

packages/grafana-ui/src/components/BarGauge/BarGauge.tsx

@@ -268,10 +268,13 @@ function calculateTitleDimensions(props: Props): TitleDimensions {
   const titleFontSize = titleHeight / TITLE_LINE_HEIGHT;
   const textSize = measureText(title, titleFontSize);
 
+  // Do not allow title to take up more than 40% width
+  const textWidth = Math.min(textSize.width + 15, width * 0.4);
+
   return {
     fontSize: text?.titleSize ?? titleFontSize,
     height: 0,
-    width: textSize.width + 15,
+    width: textWidth,
     placement: 'left',
   };
 }