refactor(FE): Make ConfirmationModal body scrollable and sticky

src/components/modal/ConfirmationModal.tsx

@@ -122,10 +122,18 @@ const ConfirmationModal = ({
       closeOnBackdrop={closeOnBackdrop}
       className={{
         ...className,
-        modalBox: cn('rounded-xl p-4', className?.modalBox),
+        modalBox: cn(
+          'rounded-xl p-4 flex flex-col gap-4 max-h-[90vh]',
+          className?.modalBox
+        ),
       }}
     >
-      <div className='w-full flex flex-col gap-4'>
+      <div
+        className={cn(
+          'flex flex-col gap-4',
+          children && 'sticky top-0 bg-inherit z-10'
+        )}
+      >
         {iconPosition === 'center' ? (
           <>
             <div className='w-fit mx-auto'>
@@ -164,17 +172,24 @@ const ConfirmationModal = ({
             </div>
           </div>
         )}
+      </div>
 
-        {children && <div className='w-full'>{children}</div>}
+      {children && (
+        <div className='w-full flex-1 overflow-y-auto'>{children}</div>
+      )}
 
       {(secondaryButton || primaryButton) && (
         <div
-            className={cn('w-full grid gap-3', {
+          className={cn(
+            'w-full grid gap-3',
+            children && 'sticky bottom-0 bg-inherit z-10',
+            {
               'grid-cols-2': secondaryButton && primaryButton,
               'grid-cols-1':
                 (secondaryButton && !primaryButton) ||
                 (!secondaryButton && primaryButton),
-            })}
+            }
+          )}
         >
           {secondaryButton && secondaryButton.text && (
             <Button
@@ -218,17 +233,13 @@ const ConfirmationModal = ({
                   ? primaryButton?.isLoading
                   : isPrimaryButtonLoading
               }
-                className={cn(
+              className={cn('p-2 rounded-xl text-sm', primaryButton?.className)}
-                  'p-2 rounded-xl text-sm',
-                  primaryButton?.className
-                )}
             >
               {primaryButton?.text ?? 'Ya'}
             </Button>
           )}
         </div>
       )}
-      </div>
     </Modal>
   );
 };