make sim review page more responsive (#80)

Author: jacobfilik

web-conexs-client/src/components/SimulationReviewPage.tsx

@@ -19,6 +19,7 @@ import { useNavigate } from "react-router-dom";
 import NavigateNextIcon from "@mui/icons-material/NavigateNext";
 import NavigateBeforeIcon from "@mui/icons-material/NavigateBefore";
 
+
 export default function SimulationReviewPage() {
   const [cursor, setCursor] = useState<string | null>(null);
   const [next, setNext] = useState<string | null>(null);
@@ -65,11 +66,15 @@ export default function SimulationReviewPage() {
             alignItems="center"
             margin="5px 20px"
           >
-            <Typography variant="h5" component="div">
+            <Typography
+              variant="h5"
+              component="div"
+              fontSize={{ xs: "1rem", sm: "1.25rem", md: "1.5rem" }}
+            >
               Simulation Results
             </Typography>
             <Button variant="contained" onClick={handleClickOpen}>
-              Download All
+              Download
             </Button>
             <Dialog
               open={open}

web-conexs-client/src/components/SimulationTable.tsx

@@ -9,11 +9,13 @@ import {
   TableBody,
   Box,
   Typography,
-  Button,
   useMediaQuery,
   Tooltip,
+  IconButton,
 } from "@mui/material";
 
+import CancelIcon from "@mui/icons-material/Cancel";
+
 import { tableCellClasses } from "@mui/material/TableCell";
 
 import { styled, useTheme } from "@mui/material/styles";
@@ -122,24 +124,37 @@ function SimulationMetadata(props: {
             overflow: "hidden",
           }}
         >
-          {structLabel}
+          {props.compact
+            ? structLabel
+            : props.simulation?.chemical_structure.id}
         </StyledTableCell>
       </Tooltip>
-      <StyledTableCell align="center" onClick={clickCell}>
+      <StyledTableCell
+        sx={{
+          maxWidth: "50px",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap",
+          overflow: "hidden",
+        }}
+        align="center"
+        onClick={clickCell}
+      >
         <Typography color={color}> {props.simulation?.status ?? ""}</Typography>
       </StyledTableCell>
       {props.compact && (
-        <StyledTableCell align="center" onClick={clickCell}>
-          {request_string}
-        </StyledTableCell>
+        <>
+          <StyledTableCell align="center" onClick={clickCell}>
+            {request_string}
+          </StyledTableCell>
+          <StyledTableCell align="center" onClick={clickCell}>
+            {complete_string}
+          </StyledTableCell>
+        </>
       )}
-
-      <StyledTableCell align="center" onClick={clickCell}>
-        {complete_string}
-      </StyledTableCell>
       <StyledTableCell align="left">
         {showCancel && (
-          <Button
+          <IconButton
+            color="error"
             size="small"
             onClick={() => {
               if (props.simulation != null) {
@@ -148,8 +163,8 @@ function SimulationMetadata(props: {
             }}
             variant="contained"
           >
-            Cancel
-          </Button>
+            <CancelIcon fontSize="small" />
+          </IconButton>
         )}
       </StyledTableCell>
     </StyledTableRow>
@@ -189,11 +204,18 @@ export default function SimulationTable(props: {
             <TableRow>
               <TableCell align="left">ID</TableCell>
               <TableCell align="left">Type</TableCell>
-              <TableCell align="left">Structure</TableCell>
+              <TableCell align="left">
+                {" "}
+                {matches ? "Structure" : "Struct."}
+              </TableCell>
               <TableCell align="center">Status</TableCell>
-              {matches && <TableCell align="center">Request Date</TableCell>}
+              {matches && (
+                <>
+                  <TableCell align="center">Request Date</TableCell>
+                  <TableCell align="center">Completion Date</TableCell>
+                </>
+              )}
 
-              <TableCell align="center">Completion Date</TableCell>
               <TableCell align="left"></TableCell>
             </TableRow>
           </TableHead>