phone size responsive issue shifting details page (#9256)

ohcnetwork · Nov 30, 2024 · 8118ccf · 8118ccf
1 parent 66326dd
commit 8118ccf
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 13 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -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>