PieChart: Fix right-oriented legends (#116084)

* chore(gdev-dashboard): reproduce CSS layout bug in a panel

* fix(table-legend): tweak CSS for right oriented table legend in piechart

* chore(gdev-dashboard): update migrated dashboard file to match

apps/dashboard/pkg/migration/testdata/dev-dashboards-output/panel-piechart/panel_test_piechart.v42.json

@@ -290,7 +290,7 @@
         ],
         "legend": {
           "displayMode": "table",
-          "placement": "bottom",
+          "placement": "right",
           "showLegend": true,
           "values": [
             "percent"
@@ -304,7 +304,7 @@
           "fields": "",
           "values": false
         },
-        "showLegend": false,
+        "showLegend": true,
         "strokeWidth": 1,
         "text": {}
       },
@@ -323,6 +323,15 @@
         }
       ],
       "title": "Percent",
+      "transformations": [
+        {
+          "id": "renameByRegex",
+          "options": {
+            "regex": "^Backend-(.*)$",
+            "renamePattern": "b-$1"
+          }
+        }
+      ],
       "type": "piechart"
     },
     {
@@ -366,7 +375,7 @@
         ],
         "legend": {
           "displayMode": "table",
-          "placement": "bottom",
+          "placement": "right",
           "showLegend": true,
           "values": [
             "value"
@@ -380,7 +389,7 @@
           "fields": "",
           "values": false
         },
-        "showLegend": false,
+        "showLegend": true,
         "strokeWidth": 1,
         "text": {}
       },
@@ -399,6 +408,15 @@
         }
       ],
       "title": "Value",
+      "transformations": [
+        {
+          "id": "renameByRegex",
+          "options": {
+            "regex": "(.*)",
+            "renamePattern": "$1-how-much-wood-could-a-woodchuck-chuck-if-a-woodchuck-could-chuck-wood"
+          }
+        }
+      ],
       "type": "piechart"
     },
     {

devenv/dev-dashboards/panel-piechart/panel_test_piechart.json

@@ -248,7 +248,7 @@
         "legend": {
           "values": ["percent"],
           "displayMode": "table",
-          "placement": "bottom"
+          "placement": "right"
         },
         "pieType": "pie",
         "reduceOptions": {
@@ -256,7 +256,7 @@
           "fields": "",
           "values": false
         },
-        "showLegend": false,
+        "showLegend": true,
         "strokeWidth": 1,
         "text": {}
       },
@@ -272,6 +272,15 @@
       "timeFrom": null,
       "timeShift": null,
       "title": "Percent",
+      "transformations": [
+        {
+          "id": "renameByRegex",
+          "options": {
+            "regex": "^Backend-(.*)$",
+            "renamePattern": "b-$1"
+          }
+        }
+      ],
       "type": "piechart"
     },
     {
@@ -311,7 +320,7 @@
         "legend": {
           "values": ["value"],
           "displayMode": "table",
-          "placement": "bottom"
+          "placement": "right"
         },
         "pieType": "pie",
         "reduceOptions": {
@@ -319,7 +328,7 @@
           "fields": "",
           "values": false
         },
-        "showLegend": false,
+        "showLegend": true,
         "strokeWidth": 1,
         "text": {}
       },
@@ -335,6 +344,15 @@
       "timeFrom": null,
       "timeShift": null,
       "title": "Value",
+      "transformations": [
+        {
+          "id": "renameByRegex",
+          "options": {
+            "regex": "(.*)",
+            "renamePattern": "$1-how-much-wood-could-a-woodchuck-chuck-if-a-woodchuck-could-chuck-wood"
+          }
+        }
+      ],
       "type": "piechart"
     },
     {

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

@@ -119,6 +119,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
   table: css({
     width: '100%',
     'th:first-child': {
+      width: '100%',
       borderBottom: `1px solid ${theme.colors.border.weak}`,
     },
   }),

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

@@ -134,6 +134,7 @@ const getStyles = (theme: GrafanaTheme2) => {
       label: 'LegendLabelCell',
       maxWidth: 0,
       width: '100%',
+      minWidth: theme.spacing(16),
     }),
     labelCellInner: css({
       label: 'LegendLabelCellInner',