From 9be09ae2810fd71cccd36c74497a0222a4da187c Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Tue, 30 Dec 2025 10:55:43 +0700
Subject: [PATCH] refactor(FE-438): Make filter modal and controls responsive

---
 src/components/pages/uniformity/UniformityTable.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/pages/uniformity/UniformityTable.tsx b/src/components/pages/uniformity/UniformityTable.tsx
index 78615b29..80ee34f4 100644
--- a/src/components/pages/uniformity/UniformityTable.tsx
+++ b/src/components/pages/uniformity/UniformityTable.tsx
@@ -884,7 +884,7 @@ const UniformityTable = ({ refresh }: { refresh?: () => void }) => {
         {/* Filter Modal */}
         <Modal
           ref={filterModal.ref}
-          className={{ modalBox: 'rounded-2xl max-w-5/12' }}
+          className={{ modalBox: 'rounded-2xl xl:max-w-4/12 max-w-sm' }}
         >
           <div className='flex flex-col gap-2'>
             <div className='flex items-center justify-between'>
@@ -908,7 +908,7 @@ const UniformityTable = ({ refresh }: { refresh?: () => void }) => {
             <div className='divider my-0'></div>
 
             <div className='flex flex-col gap-4'>
-              <div className='grid grid-cols-1 sm:grid-cols-2 gap-4'>
+              <div className='grid grid-cols-1 sm:grid-cols-2 sm:gap-4'>
                 <DateInput
                   label='Tanggal'
                   name='start_date'
@@ -965,17 +965,17 @@ const UniformityTable = ({ refresh }: { refresh?: () => void }) => {
 
             <div className='divider my-0'></div>
 
-            <div className='flex justify-between gap-2 [&_button]:px-20'>
+            <div className='xl:flex xl:flex-row xl:justify-between gap-2 [&_button]:px-10 grid grid-cols-1'>
               <Button
                 variant='ghost'
-                className='max-w-max'
+                className='w-full xl:max-w-max'
                 onClick={handleResetFilters}
               >
                 Reset Filter
               </Button>
               <Button
                 color='primary'
-                className='max-w-max'
+                className='w-full xl:max-w-max'
                 onClick={handleApplyFilters}
               >
                 Apply Filter