dynamic window size of user list

typescript/frontend-marios2/src/content/dashboards/Users/FlatUsersView.tsx

@@ -48,12 +48,20 @@ const FlatUsersView = (props: FlatUsersViewProps) => {
 
   const isMobile = window.innerWidth <= 1490;
 
+  // Only show the detail pane once a real user is picked; until then let the
+  // list span the full width so long emails aren't clipped by a reserved-but-
+  // empty pane.
+  const selectedUserObj = findUser(selectedUser);
+  const hasSelection = selectedUser !== -1 && selectedUserObj !== undefined;
+
   return (
     <Grid container spacing={1} sx={{ marginTop: '1px' }}>
-      <Grid item xs={6} md={5}>
+      <Grid item xs={12} md={hasSelection ? 5 : 12}>
         <Card>
           <Divider />
-          <TableContainer sx={{ maxHeight: '520px', overflowY: 'auto' }}>
+          <TableContainer
+            sx={{ maxHeight: 'calc(100vh - 260px)', overflowY: 'auto' }}
+          >
             <Table>
               <TableHead>
                 <TableRow>
@@ -114,14 +122,14 @@ const FlatUsersView = (props: FlatUsersViewProps) => {
           </TableContainer>
         </Card>
       </Grid>
-      <Grid item xs={6} md={7}>
-        {selectedUser && (
+      {hasSelection && (
+        <Grid item xs={12} md={7}>
           <User
-            current_user={findUser(selectedUser)}
+            current_user={selectedUserObj}
             fetchDataAgain={props.fetchDataAgain}
           ></User>
-        )}
-      </Grid>
+        </Grid>
+      )}
     </Grid>
   );
 };