StatPanel: Add padding between horizontal name and value (#55299)

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

@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
 
-import { DisplayValue, DisplayValueAlignmentFactors, FieldSparkline } from '@grafana/data';
+import { DisplayValue, DisplayValueAlignmentFactors, FieldSparkline, VizOrientation } from '@grafana/data';
 import { VizTextDisplayOptions } from '@grafana/schema';
 
 import { Themeable2 } from '../../types';
@@ -63,6 +63,8 @@ export interface Props extends Themeable2 {
   textMode?: BigValueTextMode;
   /** If true disables the tooltip */
   hasLinks?: boolean;
+  /** The orientation of the parent container */
+  parentOrientation?: VizOrientation;
 
   /**
    * If part of a series of stat panes, this is the total number.

packages/grafana-ui/src/components/BigValue/BigValueLayout.tsx

@@ -1,7 +1,7 @@
 import React, { CSSProperties } from 'react';
 import tinycolor from 'tinycolor2';
 
-import { formattedValueToString, DisplayValue, FieldConfig, FieldType } from '@grafana/data';
+import { formattedValueToString, DisplayValue, FieldConfig, FieldType, VizOrientation } from '@grafana/data';
 import { GraphDrawStyle, GraphFieldConfig } from '@grafana/schema';
 
 import { getTextColorForBackground } from '../../utils';
@@ -62,6 +62,10 @@ export abstract class BigValueLayout {
       lineHeight: LINE_HEIGHT,
     };
 
+    if (this.props.parentOrientation === VizOrientation.Horizontal && this.justifyCenter) {
+      styles.paddingRight = '0.75ch';
+    }
+
     if (this.props.colorMode === BigValueColorMode.Background) {
       styles.color = getTextColorForBackground(this.valueColor);
     }