Legend: Right align calculation values (#52400) (#52454)

(cherry picked from commit 49311e1cfb)

Co-authored-by: Dominik Prokop <dominik.prokop@grafana.com>

packages/grafana-ui/src/components/VizLegend/VizLegendTable.tsx

@@ -108,9 +108,9 @@ const getStyles = (theme: GrafanaTheme2) => ({
     color: ${theme.colors.primary.text};
     font-weight: ${theme.typography.fontWeightMedium};
     border-bottom: 1px solid ${theme.colors.border.weak};
-    padding: ${theme.spacing(0.25, 2, 0.25, 1)};
+    padding: ${theme.spacing(0.25, 1, 0.25, 1)};
     font-size: ${theme.typography.bodySmall.fontSize};
-    text-align: left;
+    text-align: right;
     white-space: nowrap;
   `,
   // This needs to be padding-right - icon size(xs==12) to avoid jumping

packages/grafana-ui/src/components/VizLegend/VizLegendTableItem.tsx

@@ -123,7 +123,7 @@ const getStyles = (theme: GrafanaTheme2) => {
       align-items: center;
     `,
     value: css`
-      text-align: left;
+      text-align: right;
     `,
     yAxisLabel: css`
       color: ${theme.colors.text.secondary};