From 9e8e819af11cbd5198778b18532711849f942fbe Mon Sep 17 00:00:00 2001
From: Guergana Tzatchkova <pestanias@yahoo.com>
Date: Fri, 26 Apr 2024 02:25:14 -0700
Subject: [PATCH] Make editors take 100% of height (#327)

These modifications are affecting mainly the Chart and PackageData
editors.
---
 client/components/Editors/Package/Layout.tsx | 17 ++++++++++++-----
 client/components/Parts/Boxes/Scroll.tsx     |  1 +
 client/components/Parts/Grids/Columns.tsx    |  4 +++-
 3 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/client/components/Editors/Package/Layout.tsx b/client/components/Editors/Package/Layout.tsx
index 76d4dd577..524e71e23 100644
--- a/client/components/Editors/Package/Layout.tsx
+++ b/client/components/Editors/Package/Layout.tsx
@@ -18,7 +18,7 @@ import * as types from '../../../types'
 
 export default function Layout() {
   return (
-    <Box sx={{ height: '100%' }}>
+    <Box className="package__layout__box" sx={{ height: '100%', display: 'flex' }}>
       <LayoutWithMenu />
     </Box>
   )
@@ -87,7 +87,10 @@ function LayoutWithMenu() {
 
   return (
     <Columns spacing={3} layout={[2, 8]} columns={10}>
-      <Box sx={{ padding: 2, borderRight: 'solid 1px #ddd', height: '100%' }}>
+      <Box
+        className="package__box__file-menu"
+        sx={{ padding: 2, borderRight: 'solid 1px #ddd', height: '100%' }}
+      >
         {!shallow && (
           <Box
             sx={{
@@ -111,8 +114,12 @@ function LayoutWithMenu() {
           }}
         />
       </Box>
-      <Box>
-        <Box hidden={!section.startsWith('package')}>
+      <Box className="package__box__main-menu">
+        <Box
+          hidden={!section.startsWith('package')}
+          className="inner-wrapper"
+          sx={{ height: '100%', display: 'flex' }}
+        >
           <LayoutWithoutMenu />
         </Box>
         {!shallow && (
@@ -156,7 +163,7 @@ function LayoutWithoutMenu() {
   if (!section) return null
   return (
     <Columns spacing={3} layout={[5, 3]} columns={8}>
-      <Box>
+      <Box className="layout-without-menu__box">
         <Box hidden={section !== 'package'}>
           <PackageSection />
         </Box>
diff --git a/client/components/Parts/Boxes/Scroll.tsx b/client/components/Parts/Boxes/Scroll.tsx
index e646763be..bb16a7c91 100644
--- a/client/components/Parts/Boxes/Scroll.tsx
+++ b/client/components/Parts/Boxes/Scroll.tsx
@@ -8,6 +8,7 @@ export default function ScrollBox(props: React.PropsWithChildren<ScrollBoxProps>
   return (
     <Box
       sx={{
+        display: 'flex',
         height: props.height,
         overflow: 'auto',
         scrollbarWidth: 'thin',
diff --git a/client/components/Parts/Grids/Columns.tsx b/client/components/Parts/Grids/Columns.tsx
index 3bdf76929..88b04e151 100644
--- a/client/components/Parts/Grids/Columns.tsx
+++ b/client/components/Parts/Grids/Columns.tsx
@@ -17,13 +17,15 @@ export default function Columns(props: React.PropsWithChildren<ColumnsProps>) {
   ) as GridSize
   return (
     <Grid
+      className="columns__grid"
       container
       columns={columns}
       columnSpacing={props.spacing}
       sx={{ height: props.height }}
     >
       {React.Children.map(props.children, (child, index) => (
-        <Grid item key={index} md={props.layout ? props.layout[index] : defaultWidth}>
+        <Grid item key={index} md={props.layout ? props.layout[index] : defaultWidth}
+          sx={{ display: 'flex' }}>
           {child}
         </Grid>
       ))}