feat:update

src/components/page/consultation/MainPageConsultation/MainPageConsultation.tsx

@@ -601,13 +601,19 @@ const MainPageConsultation = () => {
 
                   // ===== TAB TẤT CẢ =====
                   return (
-                    <div className="flex items-center gap-2">
+                    /* 
+         Chỉnh sửa tại đây: 
+         - flex-col: xếp dọc trên màn mobile
+         - sm:flex-row: quay lại xếp ngang trên tablet / desktop (>= 640px)
+         - w-full sm:w-auto: mở rộng full chiều rộng ô khi ở màn mobile cho cân đối
+      */
+                    <div className="flex flex-col sm:flex-row items-center justify-center gap-2 w-full sm:w-auto">
                       <Popover.Root>
                         <Popover.Trigger asChild>
                           <button
                             disabled={isDisabled}
                             className={clsx(
-                              "flex h-8 w-8 items-center justify-center rounded-full border border-gray-200",
+                              "flex h-8 w-8 items-center justify-center rounded-full border border-gray-200 shrink-0",
                               isDisabled
                                 ? "cursor-not-allowed opacity-50"
                                 : "hover:bg-gray-100",
@@ -623,14 +629,14 @@ const MainPageConsultation = () => {
                             align="end"
                             sideOffset={8}
                             className="
-              z-50
-              min-w-[300px]
-              rounded-xl
-              border
-              bg-white
-              p-2
-              shadow-xl
-            "
+                z-50
+                min-w-[300px]
+                rounded-xl
+                border
+                bg-white
+                p-2
+                shadow-xl
+              "
                           >
                             <div className="space-y-1">
                               {item.specialtyClinics.map((specialty) => (
@@ -658,6 +664,7 @@ const MainPageConsultation = () => {
                         variant="red"
                         disabled={isDisabled}
                         onClick={() => handleOpenCancel(item)}
+                        className="w-full sm:w-auto"
                       >
                         Hủy
                       </CustomButton>
@@ -667,6 +674,7 @@ const MainPageConsultation = () => {
                         variant="green"
                         disabled={isDisabled}
                         onClick={() => handleOpenComplete(item)}
+                        className="w-full sm:w-auto"
                       >
                         Hoàn thành
                       </CustomButton>

src/components/page/patient/MainPagePatient/MainPagePatient.tsx

@@ -300,7 +300,12 @@ const MainPagePatient = () => {
               title: "ACTION",
 
               render: (item: PatientItem) => (
-                <div className="flex items-center gap-2">
+                /* 
+       - flex-col: Xếp dọc các icon trên mobile
+       - sm:flex-row: Xếp ngang lại trên màn lớn (>= 640px)
+       - items-center justify-center: Căn giữa các nút khi xếp dọc
+    */
+                <div className="flex flex-col sm:flex-row items-center justify-center gap-2">
                   {/* UPDATE */}
                   <CustomButton
                     size="sm"

src/components/page/prescription/MainPrescription/MainPrescription.tsx

@@ -185,7 +185,7 @@ const MainPrescription = () => {
               title: "ACTION",
 
               render: (item: any) => (
-                <div className="flex items-center gap-2">
+                <div className="flex flex-col sm:flex-row items-center justify-center gap-2">
                   <CustomButton
                     size="sm"
                     icon={<Eye className="text-blue-400" />}