responsive drawer and modals (#616)

* responsive drawer and modals

responsive drawer and modals

* lint fix

Author: nitheesh-aot

compliance-web/src/components/App/CaseFiles/Profile/CaseFileCreateComplaint.tsx

@@ -1,4 +1,5 @@
 import ComplaintDrawer from "@/components/App/Complaints/ComplaintDrawer";
+import useResponsiveDrawerWidth from "@/hooks/useResponsiveDrawerWidth";
 import { CaseFile } from "@/models/CaseFile";
 import { useDrawer } from "@/store/drawerStore";
 import { notify } from "@/store/snackbarStore";
@@ -37,6 +38,11 @@ const CaseFileCreateComplaint = ({
     [caseFileData, queryClient, setClose]
   );
 
+  const drawerWidth = useResponsiveDrawerWidth(
+    DRAWER_WIDTHS.COMPLAINT_DRAWER,
+    { mdToLgMax: "750px" }
+  );
+
   const handleOpenComplaintDrawer = useCallback(() => {
     setOpen({
       content: (
@@ -45,9 +51,9 @@ const CaseFileCreateComplaint = ({
           caseFile={caseFileData as CaseFile}
         />
       ),
-      width: DRAWER_WIDTHS.COMPLAINT_DRAWER,
+      width: drawerWidth,
     });
-  }, [setOpen, handleOnSubmit, caseFileData]);
+  }, [setOpen, handleOnSubmit, caseFileData, drawerWidth]);
 
   return hidden ? null : (
     <Button

compliance-web/src/components/App/CaseFiles/Profile/CaseFileCreateInspection.tsx

@@ -1,4 +1,5 @@
 import InspectionDrawer from "@/components/App/Inspections/InspectionDrawer";
+import useResponsiveDrawerWidth from "@/hooks/useResponsiveDrawerWidth";
 import { CaseFile } from "@/models/CaseFile";
 import { useDrawer } from "@/store/drawerStore";
 import { notify } from "@/store/snackbarStore";
@@ -37,6 +38,11 @@ const CaseFileCreateInspection = ({
     [queryClient, setClose, caseFileData]
   );
 
+  const drawerWidth = useResponsiveDrawerWidth(
+    DRAWER_WIDTHS.INSPECTION_DRAWER,
+    { mdToLgMax: "715px" }
+  );
+
   const handleOpenInspectionDrawer = useCallback(() => {
     setOpen({
       content: (
@@ -45,9 +51,9 @@ const CaseFileCreateInspection = ({
           caseFile={caseFileData as CaseFile}
         />
       ),
-      width: DRAWER_WIDTHS.INSPECTION_DRAWER,
+      width: drawerWidth,
     });
-  }, [setOpen, handleOnSubmit, caseFileData]);
+  }, [setOpen, handleOnSubmit, caseFileData, drawerWidth]);
 
   return hidden ? null : (
     <Button

compliance-web/src/components/App/Complaints/ComplaintDrawer.tsx

@@ -1,5 +1,5 @@
 import { yupResolver } from "@hookform/resolvers/yup";
-import { Box, Stack } from "@mui/material";
+import { Box } from "@mui/material";
 import { FormProvider, useForm } from "react-hook-form";
 import ComplaintFormLeft from "./ComplaintFormLeft";
 import DrawerTitleBar from "@/components/Shared/Drawer/DrawerTitleBar";
@@ -31,6 +31,7 @@ import DrawerActionBarTop from "@/components/Shared/Drawer/DrawerActionBarTop";
 import DrawerActionBarBottom from "@/components/Shared/Drawer/DrawerActionBarBottom";
 import { CaseFile } from "@/models/CaseFile";
 import { useCurrentLoggedInUser } from "@/hooks/useAuthorization";
+import { MQ } from "@/styles/responsive";
 
 type ComplaintDrawerProps = {
   onSubmit: (submitMsg: string) => void;
@@ -179,9 +180,16 @@ const ComplaintDrawer: React.FC<ComplaintDrawerProps> = ({
           isShowActionBar={!complaint}
           isLoading={isCreateComplaintPending}
         />
-        <Stack
+        <Box
           height={`calc(100vh - ${appHeaderHeight + 129}px)`} // 64px (DrawerTitleBar height) + 65px (DrawerActionBar height)
-          direction="row"
+          sx={{
+            display: "flex",
+            flexDirection: "row",
+            [MQ.mdToLg]: {
+              flexDirection: "column",
+              overflow: "auto",
+            }
+          }}
         >
           <ComplaintFormLeft
             staffUsersList={staffUserList ?? []}
@@ -195,6 +203,11 @@ const ComplaintDrawer: React.FC<ComplaintDrawerProps> = ({
               width: "399px",
               boxSizing: "border-box",
               overflow: "auto",
+              [MQ.mdToLg]: {
+                width: "auto",
+                overflow: "unset",
+                ml: 2
+              }
             }}
           >
             <ComplaintSourceForm
@@ -203,7 +216,7 @@ const ComplaintDrawer: React.FC<ComplaintDrawerProps> = ({
               firstNationsList={firstNationsList ?? []}
             />
           </Box>
-        </Stack>
+        </Box>
         <DrawerActionBarBottom
           isShowActionBar={!!complaint}
           isLoading={isUpdateComplaintPending}

compliance-web/src/components/App/Complaints/ComplaintFormLeft.tsx

@@ -10,6 +10,7 @@ import RequirementSourceForm from "./RequirementSourceForm";
 import { RequirementSource } from "@/models/RequirementSource";
 
 import { Complaint } from "@/models/Complaint";
+import { MQ } from "@/styles/responsive";
 
 type ComplaintFormLeftProps = {
   staffUsersList: StaffUser[];
@@ -35,6 +36,11 @@ const ComplaintFormLeft: FC<ComplaintFormLeftProps> = ({
           width: "718px",
           overflow: "auto",
           boxSizing: "border-box",
+          [MQ.mdToLg]: {
+            width: "auto",
+            overflow: "unset",
+            pr: 4,
+          }
         }}
       >
         <ControlledTextField

compliance-web/src/components/App/Inspections/InspectionDrawer.tsx

@@ -18,7 +18,7 @@ import { Inspection, InspectionFormData } from "@/models/Inspection";
 import { StaffUser } from "@/models/Staff";
 import { useMenuStore } from "@/store/menuStore";
 import { yupResolver } from "@hookform/resolvers/yup";
-import { Stack } from "@mui/material";
+import { Box } from "@mui/material";
 import dayjs from "dayjs";
 import { useCallback, useMemo } from "react";
 import { FormProvider, useForm } from "react-hook-form";
@@ -32,6 +32,7 @@ import {
 } from "./InspectionFormUtils";
 import { Agency } from "@/models/Agency";
 import { FirstNation } from "@/models/FirstNation";
+import { MQ } from "@/styles/responsive";
 
 type InspectionDrawerProps = {
   onSubmit: (submitMsg: string) => void;
@@ -213,9 +214,16 @@ const InspectionDrawer: React.FC<InspectionDrawerProps> = ({
           isShowActionBar={!inspection}
           isLoading={isCreateInspectionPending}
         />
-        <Stack
+        <Box
           height={`calc(100vh - ${appHeaderHeight + 129}px)`} // 64px (DrawerTitleBar height) + 65px (DrawerActionBar height)
-          direction={"row"}
+          sx={{
+            display: "flex",
+            flexDirection: "row",
+            [MQ.mdToLg]: {
+              flexDirection: "column",
+              overflow: "auto",
+            }
+          }}
         >
           <InspectionFormLeft
             initiationList={initiationList ?? []}
@@ -229,7 +237,7 @@ const InspectionDrawer: React.FC<InspectionDrawerProps> = ({
             firstNationsList={firstNationsList ?? []}
             staffList={inattendanceOfficersList ?? []}
           />
-        </Stack>
+        </Box>
         <DrawerActionBarBottom
           isShowActionBar={!!inspection}
           isLoading={isUpdateInspectionPending}

compliance-web/src/components/App/Inspections/InspectionFormLeft.tsx

@@ -6,6 +6,7 @@ import { Initiation } from "@/models/Initiation";
 import { IRType } from "@/models/IRType";
 import { ProjectStatus } from "@/models/ProjectStatus";
 import { StaffUser } from "@/models/Staff";
+import { MQ } from "@/styles/responsive";
 import { Box, Stack } from "@mui/material";
 import { BCDesignTokens } from "epic.theme";
 import { FC } from "react";
@@ -37,6 +38,11 @@ const InspectionFormLeft: FC<InspectionFormLeftProps> = ({
           width: "718px",
           overflow: "auto",
           boxSizing: "border-box",
+          [MQ.mdToLg]: {
+            width: "auto",
+            overflow: "unset",
+            pr: 4,
+          }
         }}
       >
         <ControlledSwitch

compliance-web/src/components/App/Inspections/InspectionFormRight.tsx

@@ -16,6 +16,7 @@ import { FC, useEffect } from "react";
 import { useFormContext, useWatch } from "react-hook-form";
 import { AttendanceEnum } from "@/utils/constants";
 import ControlledCheckbox from "@/components/Shared/Controlled/ControlledCheckbox";
+import { MQ } from "@/styles/responsive";
 
 type InspectionFormRightProps = {
   attendanceList: Attendance[];
@@ -141,6 +142,11 @@ const InspectionFormRight: FC<InspectionFormRightProps> = ({
           width: "399px",
           boxSizing: "border-box",
           overflow: "auto",
+          [MQ.mdToLg]: {
+            width: "auto",
+            overflow: "unset",
+            ml: 2
+          }
         }}
       >
         <Stack>

compliance-web/src/components/App/Inspections/Profile/InspectionRequirements.tsx

@@ -26,6 +26,7 @@ import { DRAWER_WIDTHS } from "@/utils/constants";
 import { useRequirementStore } from "./Requirements/requirementStore";
 import RequirementLoading from "./Requirements/RequirementLoading";
 import DynamicHeightBox from "@/components/Shared/DynamicHeightBox";
+import useResponsiveDrawerWidth from "@/hooks/useResponsiveDrawerWidth";
 
 interface InspectionRequirementsProps {
   inspectionData: Inspection;
@@ -138,6 +139,11 @@ const InspectionRequirements: React.FC<InspectionRequirementsProps> = ({
     [queryClient, inspectionData, setClose]
   );
 
+  const drawerWidth = useResponsiveDrawerWidth(
+    DRAWER_WIDTHS.REQUIREMENT_DRAWER,
+    { mdToLgMax: "750px" }
+  );
+
   const handleOpenAddRequirementModal = useCallback(() => {
     setOpen({
       content: (
@@ -146,9 +152,9 @@ const InspectionRequirements: React.FC<InspectionRequirementsProps> = ({
           inspectionData={inspectionData}
         />
       ),
-      width: DRAWER_WIDTHS.REQUIREMENT_DRAWER,
+      width: drawerWidth,
     });
-  }, [setOpen, handleOnSubmit, inspectionData]);
+  }, [setOpen, handleOnSubmit, inspectionData, drawerWidth]);
 
   const handleOpenAddRegulatoryConsiderationModal = useCallback(() => {
     setOpen({
@@ -159,9 +165,9 @@ const InspectionRequirements: React.FC<InspectionRequirementsProps> = ({
           isRegulatoryConsideration={true}
         />
       ),
-      width: DRAWER_WIDTHS.REQUIREMENT_DRAWER,
+      width: drawerWidth,
     });
-  }, [setOpen, handleOnSubmit, inspectionData]);
+  }, [setOpen, handleOnSubmit, inspectionData, drawerWidth]);
 
   const handleOpenEditRequirementDrawer = useCallback(
     (
@@ -180,10 +186,10 @@ const InspectionRequirements: React.FC<InspectionRequirementsProps> = ({
             isRegulatoryConsideration={isRegulatoryConsideration}
           />
         ),
-        width: DRAWER_WIDTHS.REQUIREMENT_DRAWER,
+        width: drawerWidth,
       });
     },
-    [setOpen, handleOnSubmit, inspectionData]
+    [setOpen, handleOnSubmit, inspectionData, drawerWidth]
   );
 
   // Add a ref to store the timeout ID : to prevent multiple API calls during reordering

compliance-web/src/components/App/Inspections/Profile/Reports/ReportTabContents/IROverview/Overview.tsx

@@ -16,6 +16,7 @@ import { notify } from "@/store/snackbarStore";
 import { useQueryClient } from "@tanstack/react-query";
 import { formatInAttendance } from "@/components/App/Inspections/InspectionFormUtils";
 import { renderStaffNameWithPosition } from "@/utils/appUtils";
+import useResponsiveDrawerWidth from "@/hooks/useResponsiveDrawerWidth";
 
 const Overview = () => {
   const { inspectionData, caseFileData, isReportsReadOnly } = useReportStore();
@@ -62,6 +63,11 @@ const Overview = () => {
     [queryClient, inspectionData, setClose]
   );
 
+  const drawerWidth = useResponsiveDrawerWidth(
+    DRAWER_WIDTHS.INSPECTION_DRAWER,
+    { mdToLgMax: "715px" }
+  );
+
   const handleOpenEditModal = useCallback(() => {
     setOpen({
       content: (
@@ -71,9 +77,9 @@ const Overview = () => {
           caseFile={caseFileData as CaseFile}
         />
       ),
-      width: DRAWER_WIDTHS.INSPECTION_DRAWER,
+      width: drawerWidth,
     });
-  }, [setOpen, handleOnSubmit, inspectionData, caseFileData]);
+  }, [setOpen, handleOnSubmit, inspectionData, caseFileData, drawerWidth]);
 
   return (
     <>

compliance-web/src/components/App/Inspections/Profile/Reports/ReportTabContents/IRRegulatoryConsideration.tsx

@@ -13,6 +13,7 @@ import { InspectionRequirement } from "@/models/InspectionRequirement";
 import { REGULATORY_CONSIDERATION_TYPE_ID } from "@/components/App/Inspections/Profile/Requirements/RequirementUtils";
 import { RequirementImage } from "@/models/Image";
 import IRImageSection from "./IRImageSection";
+import useResponsiveDrawerWidth from "@/hooks/useResponsiveDrawerWidth";
 
 const IRRegulatoryConsideration = () => {
   const { inspectionData, isReportsReadOnly } = useReportStore();
@@ -60,6 +61,11 @@ const IRRegulatoryConsideration = () => {
     [setClose, inspectionData, queryClient]
   );
 
+  const drawerWidth = useResponsiveDrawerWidth(
+    DRAWER_WIDTHS.REQUIREMENT_DRAWER,
+    { mdToLgMax: "750px" }
+  );
+
   const handleOpenEditRequirementModal = useCallback(() => {
     setOpen({
       content: (
@@ -70,13 +76,14 @@ const IRRegulatoryConsideration = () => {
           isRegulatoryConsideration={true}
         />
       ),
-      width: DRAWER_WIDTHS.REQUIREMENT_DRAWER,
+      width: drawerWidth,
     });
   }, [
     setOpen,
     handleOnSubmit,
     inspectionData,
     inspectionRegulatoryConsideration,
+    drawerWidth,
   ]);
 
   return (