Merge pull request #5735 from bcgov/fix/5714

fix(5714): make cost charts responsive

Author: Kolezhanchik

app/components/private-cloud/monthly-cost/MonthyCostChart.tsx

@@ -20,7 +20,7 @@ export default function MonthlyCostChart({ data }: { data: Pick<MonthlyCost, 'da
   return (
     <Card>
       <Title>Daily Cost Breakdown for the selected month</Title>
-      <div className="relative">
+      <div className="relative min-h-[45rem]">
         <Bar options={options} data={chartData} />
       </div>
     </Card>

app/components/private-cloud/monthly-cost/monthly-cost-chart-data.tsx

@@ -25,6 +25,7 @@ export function getMonthlyCostChartConfig({ data }: { data: Pick<MonthlyCost, 'd
       },
     },
     responsive: true,
+    maintainAspectRatio: false,
     scales: {
       x: {
         stacked: true,

app/components/private-cloud/quarterly-cost/QuarterlyCostChart.tsx

@@ -20,7 +20,7 @@ export default function QuarterlyCostChart({ data }: { data: Pick<QuarterlyCost,
   return (
     <Card>
       <Title>Quarterly Cost Breakdown for the selected quarter</Title>
-      <div className="relative">
+      <div className="relative min-h-[45rem]">
         <Bar options={options} data={chartData} />
       </div>
     </Card>

app/components/private-cloud/quarterly-cost/quarterly-cost-chart-data.tsx

@@ -25,6 +25,7 @@ export function getQuarterlyCostChartConfig({ data }: { data: Pick<QuarterlyCost
       },
     },
     responsive: true,
+    maintainAspectRatio: false,
     scales: {
       x: {
         stacked: true,

app/components/private-cloud/yearly-cost/YearlyCostChart.tsx

@@ -20,7 +20,7 @@ export default function YearlyCostChart({ data }: { data: Pick<YearlyCost, 'mont
   return (
     <Card>
       <Title>Monthly Cost Breakdown for the selected year</Title>
-      <div className="relative">
+      <div className="relative min-h-[45rem]">
         <Bar options={options} data={chartData} />
       </div>
     </Card>

app/components/private-cloud/yearly-cost/yearly-cost-chart-data.tsx

@@ -25,6 +25,7 @@ export function getYearlyCostChartConfig({ data }: { data: Pick<YearlyCost, 'mon
       },
     },
     responsive: true,
+    maintainAspectRatio: false,
     scales: {
       x: {
         stacked: true,