Update breakpoints for heighs to use as much vertical space as possible

frontend-v2/src/features/trial/Doses.tsx

@@ -25,12 +25,12 @@ import FloatField from "../../components/FloatField";
 import IntegerField from "../../components/IntegerField";
 import useDirty from "../../hooks/useDirty";
 import useInterval from "../../hooks/useInterval";
-import HelpButton from "../../components/HelpButton";
 import { useSelector } from "react-redux";
 import { RootState } from "../../app/store";
 import { selectIsProjectShared } from "../login/loginSlice";
 import { TableHeader } from "../../components/TableHeader";
 import HelpOutlineIcon from "@mui/icons-material/HelpOutline";
+
 interface Props {
   onChange: () => void;
   project: ProjectRead;

frontend-v2/src/features/trial/Protocols.tsx

@@ -13,9 +13,7 @@ import {
   Tabs,
   Tab,
   IconButton,
-  Stack,
 } from "@mui/material";
-import Add from "@mui/icons-material/Add";
 import Error from "@mui/icons-material/Error";
 import {
   useCombinedModelListQuery,
@@ -35,10 +33,40 @@ import useSubjectGroups from "../../hooks/useSubjectGroups";
 import { TableHeader } from "../../components/TableHeader";
 import RemoveCircleOutlineIcon from "@mui/icons-material/RemoveCircleOutline";
 import {
-  getTableHeight,
-  SINGLE_TABLE_BREAKPOINTS,
+  getTableHeight
 } from "../../shared/calculateTableHeights";
 
+const TABLE_BREAKPOINTS = [
+  {
+    minHeight: 1100,
+    tableHeight: "78vh",
+  },
+  {
+    minHeight: 1000,
+    tableHeight: "75vh",
+  },
+  {
+    minHeight: 900,
+    tableHeight: "72vh",
+  },
+  {
+    minHeight: 800,
+    tableHeight: "68vh",
+  },
+  {
+    minHeight: 700,
+    tableHeight: "67vh",
+  },
+  {
+    minHeight: 600,
+    tableHeight: "60vh",
+  },
+  {
+    minHeight: 500,
+    tableHeight: "60vh",
+  },
+];
+
 const Protocols: FC = () => {
   const [tab, setTab] = useState(0);
   const selectedProject = useSelector(
@@ -240,7 +268,7 @@ const Protocols: FC = () => {
       <Box role="tabpanel" id={`group-tabpanel`}>
         <TableContainer
           sx={{
-            height: getTableHeight({ steps: SINGLE_TABLE_BREAKPOINTS }),
+            height: getTableHeight({ steps: TABLE_BREAKPOINTS }),
           }}
         >
           <Table stickyHeader>