phone size responsive issue shifting details page #8831 Open

ohcnetwork · Nov 30, 2024 · 0b2af69 · 0b2af69
1 parent 66326dd
commit 0b2af69
Showing 1 changed file with 5 additions and 11 deletions.
diff --git a/src/components/Shifting/ShiftDetails.tsx b/src/components/Shifting/ShiftDetails.tsx
@@ -478,30 +478,24 @@ export default function ShiftDetails(props: { id: string }) {
       ) : (
         <Page
           title={t("shifting_details")}
-          crumbsReplacements={{
-            [props.id]: { name: data?.patient_object?.name },
-          }}
           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>