From cf02cb2987146f7a3dd70fd56ca61d6724d3fcb6 Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Thu, 3 Jun 2021 07:52:49 -0400
Subject: [PATCH] VizLegendTable: fixes column spacing to span to the right
 side (#35045) (#35167)

* VizLegendTable: fixes column spacing to span to the right side

* reverted text alignment to right

* implemented a more readable solution for tabble legend spacing

(cherry picked from commit 4d574bb8aa7adf01864b12f9d9450e200b4e8e59)

Co-authored-by: Uchechukwu Obasi <obasiuche62@gmail.com>
---
 .../grafana-ui/src/components/VizLegend/VizLegendTable.tsx    | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/grafana-ui/src/components/VizLegend/VizLegendTable.tsx b/packages/grafana-ui/src/components/VizLegend/VizLegendTable.tsx
index 583f75f4891..8e3ea829c12 100644
--- a/packages/grafana-ui/src/components/VizLegend/VizLegendTable.tsx
+++ b/packages/grafana-ui/src/components/VizLegend/VizLegendTable.tsx
@@ -98,6 +98,9 @@ const getStyles = (theme: GrafanaTheme) => ({
   table: css`
     width: 100%;
     margin-left: ${theme.spacing.sm};
+    th:first-child {
+      width: 100%;
+    }
   `,
   header: css`
     color: ${theme.colors.textBlue};
@@ -105,6 +108,7 @@ const getStyles = (theme: GrafanaTheme) => ({
     border-bottom: 1px solid ${theme.colors.border1};
     padding: ${theme.spacing.xxs} ${theme.spacing.sm};
     text-align: right;
+    white-space: nowrap;
   `,
   headerSortable: css`
     cursor: pointer;