From 85efaa232578e2a6266642d69351b175c63156bf Mon Sep 17 00:00:00 2001
From: Tristan Huet <tristan.huet@cosmotech.com>
Date: Mon, 20 Jan 2025 20:15:13 +0100
Subject: [PATCH] fix: fix Table hidden by errors panel

In scenario view, tables could be hidden when an errors panel was
visible. This commits adds a minimum height for the table and a
scrollbar to make it always visible.
Other minor changes have been added to keep the correct height in
fullscreen and when a '100%' height is provided in the component
props (e.g. in the 'dataset details' dialog).
---
 src/inputs/Table/Table.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/inputs/Table/Table.js b/src/inputs/Table/Table.js
index 558aac43..163c0067 100644
--- a/src/inputs/Table/Table.js
+++ b/src/inputs/Table/Table.js
@@ -55,6 +55,7 @@ const useStyles = makeStyles((theme) => ({
     right: 'auto',
     bottom: 'auto',
     position: 'fixed',
+    height: '100%',
     width: '100%',
     // z-index for the fullscreen container must be higher than 1200 to hide the app bar and drawers, but lower than
     // 1300 to still appear under modals & tooltips (see https://mui.com/material-ui/customization/z-index/ for details)
@@ -374,7 +375,7 @@ export const Table = (props) => {
       id="table-container"
       data-cy="table-input"
       {...otherProps}
-      style={{ height }}
+      style={{ height, overflow: 'auto' }}
       className={isDirty ? classes.dirtyInput : isDirty === false ? classes.notDirtyInput : ''}
     >
       <div data-cy="label">
@@ -391,7 +392,7 @@ export const Table = (props) => {
       <div
         data-cy="grid"
         id="grid-container"
-        style={{ height: `calc(100% - ${TABLE_TOOLBAR_HEIGHT})` }}
+        style={{ height: height === '100%' ? '100%' : undefined }}
         className={`${agTheme} ${isFullscreen && classes.fullscreenGridContainer}`}
       >
         <div
@@ -405,7 +406,7 @@ export const Table = (props) => {
         >
           {errorsPanelElement}
           {tableToolbarElement}
-          <Box style={{ flex: '1 0 0', overflow: 'auto' }} sx={{ width: width ?? '100%' }}>
+          <Box style={{ flex: '1 0 0', overflow: 'auto', minHeight: '200px' }} sx={{ width: width ?? '100%' }}>
             {isReady && !isLoading ? agGridElement : tablePlaceholder}
           </Box>
         </div>