fix: Update chart container styles for improved responsiveness and consistency across various components

Author: x0sina

dashboard/src/components/charts/all-nodes-stacked-bar-chart.tsx

@@ -515,7 +515,7 @@ export function AllNodesStackedBarChart() {
               <ChartContainer
                 dir="ltr"
                 config={chartView === 'pie' ? pieChartConfig : chartConfig}
-                className="max-h-[400px] min-h-[200px] w-full"
+                className="h-[200px] w-full sm:h-[320px] lg:h-[400px]"
               >
                 {chartData.length > 0 && chartView === 'bar' ? (
                   <BarChart

dashboard/src/components/charts/costume-bar-chart.tsx

@@ -297,7 +297,7 @@ export function CostumeBarChart({ nodeId }: CostumeBarChartProps) {
             <ChartContainer
               dir="ltr"
               config={chartConfig}
-              className="max-h-[300px] min-h-[150px] w-full overflow-x-auto sm:max-h-[400px] sm:min-h-[200px]"
+              className="h-[200px] w-full overflow-x-auto sm:h-[320px] lg:h-[400px]"
             >
               {chartData.length > 0 ? (
                 <BarChart accessibilityLayer data={chartData} margin={{ top: 5, right: 10, left: 10, bottom: 5 }}>

dashboard/src/components/charts/user-sub-update-pie-chart.tsx

@@ -300,7 +300,7 @@ function UserSubUpdatePieChart({ username, adminId }: UserSubUpdatePieChartProps
         ) : (
           <div className="flex flex-col items-center gap-6 lg:flex-row">
             <div className="w-full lg:w-1/2">
-              <ChartContainer config={chartConfig} className="mx-auto aspect-square max-h-[320px] max-w-[320px] [&_.recharts-text]:fill-transparent">
+              <ChartContainer config={chartConfig} className="mx-auto h-[220px] w-[220px] max-h-[320px] max-w-[320px] sm:h-[280px] sm:w-[280px] lg:h-[320px] lg:w-[320px] [&_.recharts-text]:fill-transparent">
                 <PieChart>
                   <ChartTooltip content={<CustomTooltip />} />
                   <Pie data={chartData} dataKey="updates" nameKey="agent" innerRadius="55%" outerRadius="95%" paddingAngle={piePaddingAngle} strokeWidth={pieStrokeWidth} isAnimationActive>

dashboard/src/components/dialogs/usage-modal.tsx

@@ -698,7 +698,7 @@ const UsageModal = ({ open, onClose, username }: UsageModalProps) => {
                   <div className="text-sm">{t('usersTable.tryDifferentRange', { defaultValue: 'Try a different time range.' })}</div>
                 </div>
               ) : (
-                <ChartContainer config={allNodesSelected && chartView === 'pie' ? pieChartConfig : chartConfig} dir={'ltr'}>
+                <ChartContainer config={allNodesSelected && chartView === 'pie' ? pieChartConfig : chartConfig} dir={'ltr'} className="h-[200px] w-full sm:h-[320px]">
                   <ResponsiveContainer width="100%" height={width < 500 ? 200 : 320}>
                     {allNodesSelected && chartView === 'pie' ? (
                       <RechartsPieChart>