Merge pull request #16703 from davelopez/fix_dashboard_chart_legend

[23.1] Fix legend not scrollable in storage overview charts

client/src/components/User/DiskUsage/Visualizations/Charts/BarChart.vue

@@ -2,7 +2,6 @@
 import { BCard } from "bootstrap-vue";
 import { computed, onMounted, ref, watch } from "vue";
 import * as d3 from "d3";
-
 import type { DataValuePoint } from ".";
 
 interface BarChartProps {
@@ -184,6 +183,17 @@ function createLegend() {
         .attr("fill", "black")
         .text((d) => props.labelFormatter(d));
 
+    // Set the width of the SVG to the width of the widest entry
+    let maxWidth = 0;
+    for (const node of entries.nodes()) {
+        const width = (node as HTMLElement).getBoundingClientRect().width;
+        maxWidth = Math.max(maxWidth, width);
+    }
+    const svg = container.node()?.closest("svg");
+    if (svg) {
+        svg.setAttribute("width", `${maxWidth}`);
+    }
+
     return entries;
 }
 
@@ -294,7 +304,7 @@ function setTooltipPosition(mouseX: number, mouseY: number): void {
 </script>
 
 <template>
-    <b-card class="mb-3 mx-3">
+    <b-card class="mb-3">
         <template v-slot:header>
             <h3 class="text-center my-1">
                 <slot name="title">
@@ -337,7 +347,7 @@ function setTooltipPosition(mouseX: number, mouseY: number): void {
 }
 
 .bar-chart {
-    float: right;
+    float: left;
 
     &:deep(svg) {
         overflow: visible;
@@ -349,12 +359,9 @@ function setTooltipPosition(mouseX: number, mouseY: number): void {
 }
 
 .legend {
-    float: left;
+    float: right;
     height: 400px;
-
-    &:deep(svg) {
-        overflow: visible;
-    }
+    overflow: auto;
 
     &:deep(.legend-item) {
         font-size: 14px;