refactor(FE-438): Make filter modal and controls responsive

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