refactor(FE): Make approval and action buttons responsive

src/components/pages/purchase/order/PurchaseOrderDetail.tsx

@@ -605,7 +605,7 @@ const PurchaseOrderDetail = ({
   return (
     <section className='w-full'>
       {/* Approval and Action Buttons */}
-      <div className='flex justify-between items-center w-full my-6'>
+      <div className='flex flex-col sm:flex-row sm:justify-between sm:items-center w-full mb-6 gap-4 sm:gap-0'>
         <Button
           href='/purchase'
           variant='link'
@@ -630,7 +630,7 @@ const PurchaseOrderDetail = ({
                 onClick={handleApprovalClick}
                 variant='outline'
                 color='success'
-                className='w-full sm:w-fit'
+                className='flex-1 sm:w-fit'
               >
                 <Icon icon='material-symbols:check' width={24} height={24} />
                 Approve
@@ -649,7 +649,7 @@ const PurchaseOrderDetail = ({
               <Button
                 variant='outline'
                 color='error'
-                className='w-full sm:w-fit'
+                className='flex-1 sm:w-fit'
                 onClick={handleRejectionClick}
               >
                 <Icon icon='material-symbols:close' width={24} height={24} />