From 8118ccfa3c07d883336050b3fb694bffc735c14e Mon Sep 17 00:00:00 2001
From: HITMAN <112652819+ayushpatil2122@users.noreply.github.com>
Date: Sat, 30 Nov 2024 16:39:33 +0530
Subject: [PATCH] phone size responsive issue shifting details page (#9256)

---
 package-lock.json                        |  8 ++++----
 package.json                             |  2 +-
 src/components/Shifting/ShiftDetails.tsx | 13 +++++--------
 3 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 5c703af8fe1..97073c88ecb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -92,7 +92,7 @@
         "eslint-plugin-react": "^7.37.2",
         "eslint-plugin-react-hooks": "^5.0.0",
         "glob": "^11.0.0",
-        "husky": "^9.1.6",
+        "husky": "^9.1.7",
         "jsdom": "^25.0.1",
         "lint-staged": "^15.2.10",
         "local-cypress": "^1.2.6",
@@ -10449,9 +10449,9 @@
       "license": "Unlicense"
     },
     "node_modules/husky": {
-      "version": "9.1.6",
-      "resolved": "https://registry.npmjs.org/husky/-/husky-9.1.6.tgz",
-      "integrity": "sha512-sqbjZKK7kf44hfdE94EoX8MZNk0n7HeW37O4YrVGCF4wzgQjp+akPAkfUK5LZ6KuR/6sqeAVuXHji+RzQgOn5A==",
+      "version": "9.1.7",
+      "resolved": "https://registry.npmjs.org/husky/-/husky-9.1.7.tgz",
+      "integrity": "sha512-5gs5ytaNjBrh5Ow3zrvdUUY+0VxIuWVL4i9irt6friV+BqdCfmV11CQTWMiBYWHbXhco+J1kHfTOUkePhCDvMA==",
       "dev": true,
       "license": "MIT",
       "bin": {
diff --git a/package.json b/package.json
index 020d73f5e65..798c910ea91 100644
--- a/package.json
+++ b/package.json
@@ -131,7 +131,7 @@
     "eslint-plugin-react": "^7.37.2",
     "eslint-plugin-react-hooks": "^5.0.0",
     "glob": "^11.0.0",
-    "husky": "^9.1.6",
+    "husky": "^9.1.7",
     "jsdom": "^25.0.1",
     "lint-staged": "^15.2.10",
     "local-cypress": "^1.2.6",
diff --git a/src/components/Shifting/ShiftDetails.tsx b/src/components/Shifting/ShiftDetails.tsx
index 3eeb440a1b1..bc97b0b0f24 100644
--- a/src/components/Shifting/ShiftDetails.tsx
+++ b/src/components/Shifting/ShiftDetails.tsx
@@ -483,25 +483,22 @@ export default function ShiftDetails(props: { id: string }) {
           }}
           backUrl="/shifting/board"
           options={
-            <div className="flex gap-2">
+            <div className="flex flex-wrap gap-2 mt-4">
               <ButtonV2
+                className="w-full sm:w-auto"
                 tooltip={
                   ["COMPLETED", "CANCELLED"].includes(data?.status || "")
                     ? `A shifting request, once ${data?.status.toLowerCase()} cannot be updated`
                     : ""
                 }
                 tooltipClassName="tooltip-top -translate-x-28 -translate-y-1 text-xs"
-                disabled={
-                  data?.status === "COMPLETED" || data?.status === "CANCELLED"
-                }
-                onClick={() =>
-                  navigate(`/shifting/${data?.external_id}/update`)
-                }
+                disabled={data?.status === "COMPLETED" || data?.status === "CANCELLED"}
+                onClick={() => navigate(`/shifting/${data?.external_id}/update`)}
               >
                 {t("update_status_details")}
               </ButtonV2>
 
-              <ButtonV2 onClick={() => setIsPrintMode(true)}>
+              <ButtonV2 className="w-full sm:w-auto" onClick={() => setIsPrintMode(true)}>
                 <CareIcon icon="l-file-alt" className="mr-2 text-base" />{" "}
                 {t("referral_letter")}
               </ButtonV2>