Merge pull request #616 from pkpdapp-team/feedback-changes-and-fixes

Fix vertical scroll on horizontal layout
pkpdapp-team · Dec 5, 2024 · 755f850 · 755f850
2 parents 579a09c + f008753
commit 755f850
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 13 deletions.
diff --git a/frontend-v2/src/features/model/MapVariablesTab.tsx b/frontend-v2/src/features/model/MapVariablesTab.tsx
@@ -358,10 +358,7 @@ const MapVariablesTab: FC<Props> = ({
         </Table>
       </TableContainer>
       <Box sx={{ marginTop: ".5rem" }}>
-        <TableHeader
-          variant="h5"
-          label="Map RO, PD and secondary parameters"
-        />
+        <TableHeader variant="h5" label="Map RO, PD and secondary parameters" />
       </Box>
       <TableContainer
         sx={{

diff --git a/frontend-v2/src/features/model/ParameterRow.tsx b/frontend-v2/src/features/model/ParameterRow.tsx
@@ -89,6 +89,7 @@ const ParameterRow: FC<Props> = ({ project, variable, units }) => {
       </TableCell>
       <TableCell size="small" sx={{ width: "10rem" }}>
         <FloatField
+          sx={{ minWidth: "5rem" }}
           size="small"
           name="lower_bound"
           control={control}
@@ -98,6 +99,7 @@ const ParameterRow: FC<Props> = ({ project, variable, units }) => {
       </TableCell>
       <TableCell size="small" sx={{ width: "10rem" }}>
         <FloatField
+          sx={{ minWidth: "5rem" }}
           size="small"
           name="default_value"
           control={control}
@@ -109,6 +111,7 @@ const ParameterRow: FC<Props> = ({ project, variable, units }) => {
       </TableCell>
       <TableCell size="small" sx={{ width: "10rem" }}>
         <FloatField
+          sx={{ minWidth: "5rem" }}
           size="small"
           name="upper_bound"
           control={control}

diff --git a/frontend-v2/src/features/model/secondary/ThresholdsTable.tsx b/frontend-v2/src/features/model/secondary/ThresholdsTable.tsx
@@ -153,6 +153,7 @@ function VariableRow({
       </TableCell>
       <TableCell sx={{ width: "20rem" }}>
         <TextField
+          sx={{ minWidth: "5rem" }}
           type="number"
           defaultValue={variable.lower_threshold || 0}
           onChange={onChangeLowerThreshold}
@@ -161,6 +162,7 @@ function VariableRow({
       </TableCell>
       <TableCell sx={{ width: "20rem" }}>
         <TextField
+          sx={{ minWidth: "5rem" }}
           type="number"
           defaultValue={variable.upper_threshold || Infinity}
           onChange={onChangeUpperThreshold}

diff --git a/frontend-v2/src/features/model/secondary/TimeIntervalsTable.tsx b/frontend-v2/src/features/model/secondary/TimeIntervalsTable.tsx
@@ -27,9 +27,7 @@ import {
 } from "../../../app/backendApi";
 import { RootState } from "../../../app/store";
 import { useModelTimeIntervals } from "../../../hooks/useModelTimeIntervals";
-import {
-  getTableHeight,
-} from "../../../shared/calculateTableHeights";
+import { getTableHeight } from "../../../shared/calculateTableHeights";
 
 const TABLE_BREAKPOINTS = [
   {
@@ -148,6 +146,7 @@ function IntervalRow({
     <TableRow>
       <TableCell sx={{ width: "20rem" }}>
         <TextField
+          sx={{ minWidth: "5rem" }}
           size="small"
           type="number"
           value={start}
@@ -158,6 +157,7 @@ function IntervalRow({
       </TableCell>
       <TableCell sx={{ width: "20rem" }}>
         <TextField
+          sx={{ minWidth: "5rem" }}
           size="small"
           type="number"
           value={end}

diff --git a/frontend-v2/src/features/simulation/SimulationPlotView.tsx b/frontend-v2/src/features/simulation/SimulationPlotView.tsx
@@ -480,34 +480,34 @@ const SimulationPlotView: FC<SimulationPlotProps> = ({
     if (isVertical && !isHorizontal) {
       return dimensions.width > layoutBreakpoint
         ? {
-            height: dimensions.height / 2 ,
+            height: dimensions.height / 2 - buffor,
             width: dimensions.width - buffor,
           }
         : {
-            height: dimensions.height / 1.5,
+            height: dimensions.height / 1.5 - buffor,
             width: dimensions.width - buffor,
           };
     }
 
     if (!isVertical && isHorizontal) {
       return dimensions.width > layoutBreakpoint
         ? {
-            height: dimensions.height,
+            height: dimensions.height - buffor,
             width: dimensions.width / columnCount - buffor,
           }
         : {
-            height: dimensions.height,
+            height: dimensions.height - buffor,
             width: dimensions.width / 1.5 - buffor,
           };
     }
 
     return dimensions.width > layoutBreakpoint
       ? {
-          height: dimensions.height / 2,
+          height: dimensions.height / 2 - buffor,
           width: dimensions.width / columnCount - buffor,
         }
       : {
-          height: dimensions.height / 2,
+          height: dimensions.height / 2 - buffor,
           width: dimensions.width / columnCount - buffor,
         };
   };