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

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"
     },
     {