From d9322cc17d7cc157116e8970112537963ea8e4d6 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 26 Dec 2025 10:13:17 +0700
Subject: [PATCH] refactor(FE-438): Make left legend skeleton DRY and widen
 gaps

---
 .../skeleton/UniformityBarChartSkeleton.tsx   | 34 ++++++++-----------
 1 file changed, 15 insertions(+), 19 deletions(-)

diff --git a/src/components/pages/uniformity/skeleton/UniformityBarChartSkeleton.tsx b/src/components/pages/uniformity/skeleton/UniformityBarChartSkeleton.tsx
index 4983c84e..d0a950b5 100644
--- a/src/components/pages/uniformity/skeleton/UniformityBarChartSkeleton.tsx
+++ b/src/components/pages/uniformity/skeleton/UniformityBarChartSkeleton.tsx
@@ -4,21 +4,17 @@ import { Icon } from '@iconify/react';
 const LeftLegend = () => {
   return (
     <>
-      <div className='w-4 h-30 bg-gray-200 rounded animate-pulse flex items-center justify-center self-center'></div>
+      <div className='w-4 h-30 bg-gray-200 rounded animate-pulse flex items-center justify-center self-center mb-10' />
 
       <div className='grid grid-cols-1 justify-center items-center'>
-        <div className='shrink-0 flex flex-col justify-center'>
-          <div className='h-4 w-8 bg-gray-200 rounded animate-pulse' />
-        </div>
-        <div className='shrink-0 flex flex-col justify-center'>
-          <div className='h-4 w-8 bg-gray-200 rounded animate-pulse' />
-        </div>
-        <div className='shrink-0 flex flex-col justify-center'>
-          <div className='h-4 w-8 bg-gray-200 rounded animate-pulse' />
-        </div>
-        <div className='shrink-0 flex flex-col justify-center'>
-          <div className='h-4 w-8 bg-gray-200 rounded animate-pulse' />
-        </div>
+        {[...Array(5)].map((_, index) => (
+          <div
+            key={`grid-${index}`}
+            className='shrink-0 flex flex-col justify-center mb-10'
+          >
+            <div className='h-4 w-8 bg-gray-200 rounded animate-pulse' />
+          </div>
+        ))}
       </div>
     </>
   );
@@ -37,8 +33,8 @@ const ChartArea = () => {
 
   return (
     <>
-      <div className='flex-1 flex flex-col relative'>
-        <div className='flex-1 ml-6 flex flex-col'>
+      <div className='flex-1 min-w-0 flex flex-col relative'>
+        <div className='flex-1 ml-6 min-w-0 flex flex-col'>
           <div className='flex-1 relative flex flex-col justify-between py-4'>
             {[...Array(5)].map((_, index) => (
               <div
@@ -49,18 +45,18 @@ const ChartArea = () => {
             ))}
           </div>
 
-          <div className='flex justify-between gap-10 px-4 py-2'>
+          <div className='flex justify-between gap-2 sm:gap-4 md:gap-8 lg:gap-12 px-2 sm:px-4 py-2'>
             {ranges.map((range) => (
               <div
                 key={range}
-                className='flex-1 h-3 bg-gray-200 rounded animate-pulse'
+                className='h-3 w-8 sm:w-12 md:w-16 bg-gray-200 rounded animate-pulse shrink-0'
                 style={{ animationDelay: '0.5s' }}
               />
             ))}
           </div>
 
           <div className='flex justify-center pb-1'>
-            <div className='h-3 w-28 bg-gray-200 rounded animate-pulse' />
+            <div className='h-3 w-20 sm:w-28 bg-gray-200 rounded animate-pulse' />
           </div>
         </div>
       </div>
@@ -92,7 +88,7 @@ const EmptyState = () => {
 const UniformityBarChartSkeleton = () => {
   return (
     <div className='relative w-full h-full min-h-[300px] xl:min-h-[350px]'>
-      <div className='flex h-full gap-4'>
+      <div className='sm:flex hidden h-full gap-4'>
         <LeftLegend />
         <ChartArea />
       </div>