refactor(FE-316): Adjust UniformityChart responsive grid

src/components/pages/uniformity/UniformityChart.tsx

@@ -77,11 +77,14 @@ const UniformityChart = () => {
   };
 
   return (
-    <section className='w-full grid grid-cols-1 2xl:grid-cols-4 gap-4'>
+    <section className='w-full grid grid-cols-1 xl:grid-cols-2 2xl:grid-cols-4 gap-4'>
       <Card
         title='Performance Overview'
         variant='bordered'
-        className={{ wrapper: 'xl:col-span-3 w-full', body: 'h-96' }}
+        className={{
+          wrapper: 'xl:col-span-1 2xl:col-span-3 w-full',
+          body: 'h-96',
+        }}
       >
         <div className='w-full h-full flex items-center justify-center'>
           <UniformityBarChart data={barChartData} />
@@ -90,7 +93,10 @@ const UniformityChart = () => {
       <Card
         variant='bordered'
         title='Weekly Performance'
-        className={{ wrapper: 'xl:col-span-1 w-full', body: 'p-4' }}
+        className={{
+          wrapper: 'xl:col-span-1 2xl:col-span-1 w-full',
+          body: 'p-4',
+        }}
       >
         <UniformityGaugeChart
           value={gaugeChartData.value}