Prevent contact details drawer from overlapping task list

CruGlobal · May 24, 2023 · 5e00709 · 5e00709
1 parent f303f52
commit 5e00709
Showing 1 changed file with 7 additions and 2 deletions.
diff --git a/pages/accountLists/[accountListId]/tasks/[[...contactId]].page.tsx b/pages/accountLists/[accountListId]/tasks/[[...contactId]].page.tsx
@@ -283,6 +283,8 @@ const TasksPage: React.FC = () => {
   );
   //#endregion
 
+  const contactDetailsWidth = 'max(50%, 530px)';
+
   //#region JSX
   return (
     <>
@@ -365,11 +367,14 @@ const TasksPage: React.FC = () => {
                     ))}
                   </TaskCurrentHistoryButtonGroup>
                   <InfiniteList
-                    data-foo="bar"
                     loading={loading}
                     data={data?.tasks.nodes}
                     style={{
                       height: `calc(100vh - ${navBarHeight} - ${headerHeight} - ${buttonBarHeight})`,
+                      width: contactDetailsOpen
+                        ? `calc(100% - ${contactDetailsWidth})`
+                        : undefined,
+                      overflowX: 'hidden',
                     }}
                     itemContent={(index, task) => (
                       <Box key={index} flexDirection="row" width="100%">
@@ -448,7 +453,7 @@ const TasksPage: React.FC = () => {
               ) : undefined
             }
             rightOpen={contactDetailsOpen}
-            rightWidth="60%"
+            rightWidth={contactDetailsWidth}
             headerHeight={headerHeight}
           />
         </WhiteBackground>