Make editors take 100% of height (#327)

These modifications are affecting mainly the Chart and PackageData editors.
okfn · Apr 26, 2024 · 9e8e819 · 9e8e819
1 parent 1bef0af
commit 9e8e819
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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>
       ))}