From 4011d261930513723e3313faa016c55d96e69a10 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Mon, 26 Jan 2026 13:45:32 +0700
Subject: [PATCH] refactor(FE): Make approval and action buttons responsive

---
 src/components/pages/purchase/order/PurchaseOrderDetail.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
index 47dbc8f0..1f8dd3c9 100644
--- a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
+++ b/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} />