BarGauge: Fixed minor margin issue (#16419)

Fixed margin issue that was not accounted for in width calc (#16419)

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

@@ -286,7 +286,7 @@ export function getTitleStyles(props: Props): { wrapper: CSSProperties; title: C
 
       titleStyles.width = `${titleDim.width}px`;
       titleStyles.textAlign = 'right';
-      titleStyles.marginRight = '10px';
+      titleStyles.paddingRight = '10px';
     }
   }
 
@@ -344,6 +344,11 @@ function calculateBarAndValueDimensions(props: Props): BarAndValueDimensions {
     }
   }
 
+  // console.log('titleDim', titleDim);
+  // console.log('valueWidth', valueWidth);
+  // console.log('width', width);
+  // console.log('total', titleDim.width + maxBarWidth + valueWidth);
+
   return {
     valueWidth,
     valueHeight,
@@ -409,7 +414,8 @@ export function getBasicAndGradientStyles(props: Props): BasicAndGradientStyles
     barStyles.transition = 'width 1s';
     barStyles.height = `${maxBarHeight}px`;
     barStyles.width = `${barWidth}px`;
-    barStyles.marginRight = '10px';
+
+    valueStyles.paddingLeft = '10px';
 
     if (isBasic) {
       // Basic styles

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

@@ -20,6 +20,7 @@ exports[`BarGauge Render with basic options should render 1`] = `
         "display": "flex",
         "fontSize": "27.27px",
         "height": "300px",
+        "paddingLeft": "10px",
         "width": "60px",
       }
     }
@@ -33,7 +34,6 @@ exports[`BarGauge Render with basic options should render 1`] = `
         "borderRadius": "3px",
         "borderRight": "2px solid #73BF69",
         "height": "300px",
-        "marginRight": "10px",
         "transition": "width 1s",
         "width": "60px",
       }