add: responsive layout for sidebar and dashboard

pkgs/ui/src/app/nodes/NodePieChart.tsx

@@ -1,45 +1,50 @@
-import React, { PureComponent } from 'react';
-import { PieChart, Pie, Sector, Cell, ResponsiveContainer, Legend } from 'recharts';
-import { useTheme } from '@mui/material/styles';
-import { Box, Color } from '@mui/material';
-
+import React, { PureComponent } from "react";
+import {
+  PieChart,
+  Pie,
+  Sector,
+  Cell,
+  ResponsiveContainer,
+  Legend,
+} from "recharts";
+import { useTheme } from "@mui/material/styles";
+import { Box, Color } from "@mui/material";
 
 export interface PieData {
-    name: string;
-    value: number;
-    color: string;
-};
+  name: string;
+  value: number;
+  color: string;
+}
 
 interface Props {
-    data: PieData[];
-    showLabels?: boolean;
-};
+  data: PieData[];
+  showLabels?: boolean;
+}
 
-export default function NodePieChart(props: Props ) {
-    const theme = useTheme();
-    const {data, showLabels} = props;
+export default function NodePieChart(props: Props) {
+  const theme = useTheme();
+  const { data, showLabels } = props;
 
-
-    return (
-        <Box height={350}>
-        <ResponsiveContainer width="100%" height="100%">
-            <PieChart>
-                <Pie
-                    data={data}
-                    innerRadius={85}
-                    outerRadius={120}
-                    fill={theme.palette.primary.main}
-                    dataKey="value"
-                    nameKey="name"
-                    label={showLabels}
-                >
-                    {data.map((entry, index) => (
-                        <Cell key={`cell-${index}`} fill={entry.color} />
-                    ))}
-                </Pie>
-                <Legend verticalAlign="bottom" />
-            </PieChart>
-        </ResponsiveContainer>
-        </Box>
-    );
-};
+  return (
+    <Box height={350}>
+      <ResponsiveContainer width="100%" height="100%">
+        <PieChart>
+          <Pie
+            data={data}
+            innerRadius={85}
+            outerRadius={120}
+            fill={theme.palette.primary.main}
+            dataKey="value"
+            nameKey="name"
+            label={showLabels}
+          >
+            {data.map((entry, index) => (
+              <Cell key={`cell-${index}`} fill={entry.color} />
+            ))}
+          </Pie>
+          <Legend verticalAlign="bottom" />
+        </PieChart>
+      </ResponsiveContainer>
+    </Box>
+  );
+}