From 4160059bf5acd06c63a9ee6e4104a10fe3dc541d Mon Sep 17 00:00:00 2001
From: Oliver Daniel <oliverdaniel00@gmail.com>
Date: Mon, 30 Oct 2023 17:17:26 -0400
Subject: [PATCH] Flexbox is like violence: if it doesn't work, you just need
 more of it

---
 packages/web-console/src/components/Splitter/index.tsx | 2 +-
 packages/web-console/src/scenes/Console/index.tsx      | 2 ++
 packages/web-console/src/scenes/Layout/index.tsx       | 6 ++++--
 packages/web-console/src/styles/_base.scss             | 1 +
 4 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/web-console/src/components/Splitter/index.tsx b/packages/web-console/src/components/Splitter/index.tsx
index 5d5e630cb..e8c746134 100644
--- a/packages/web-console/src/components/Splitter/index.tsx
+++ b/packages/web-console/src/components/Splitter/index.tsx
@@ -244,7 +244,7 @@ export const Splitter = ({
     display: "flex",
     flexGrow: 0,
     flexBasis: basis ?? fallback,
-    flexShrink: 0,
+    flexShrink: 1,
   }
 
   if (children.length === 1) {
diff --git a/packages/web-console/src/scenes/Console/index.tsx b/packages/web-console/src/scenes/Console/index.tsx
index bc0dd8e7c..3266862ba 100644
--- a/packages/web-console/src/scenes/Console/index.tsx
+++ b/packages/web-console/src/scenes/Console/index.tsx
@@ -35,12 +35,14 @@ const Top = styled.div`
 const Bottom = styled.div`
   display: flex;
   flex: 1;
+  min-height: 0px;
 `
 
 const Tab = styled.div`
   display: flex;
   width: calc(100% - 4.5rem);
   height: 100%;
+  overflow: auto;
 `
 
 const viewModes: {
diff --git a/packages/web-console/src/scenes/Layout/index.tsx b/packages/web-console/src/scenes/Layout/index.tsx
index f84eac1bf..2dd389063 100644
--- a/packages/web-console/src/scenes/Layout/index.tsx
+++ b/packages/web-console/src/scenes/Layout/index.tsx
@@ -41,7 +41,7 @@ import { Help } from "./help"
 const Page = styled.div`
   display: flex;
   width: 100%;
-  height: calc(100% - 4rem);
+  height: 100%;
   flex-direction: column;
   flex: 1;
   overflow: hidden;
@@ -56,11 +56,13 @@ const Page = styled.div`
 const Root = styled.div`
   display: flex;
   width: 100%;
-  height: 100%;
+  flex: 1;
+  overflow-y: auto;
 `
 
 const Main = styled.div<{ sideOpened: boolean }>`
   flex: 1;
+  display: flex;
   width: ${({ sideOpened }) =>
     sideOpened ? "calc(100% - 50rem - 4.5rem)" : "calc(100% - 4.5rem)"};
 `
diff --git a/packages/web-console/src/styles/_base.scss b/packages/web-console/src/styles/_base.scss
index d28e1ab0c..a56b73039 100755
--- a/packages/web-console/src/styles/_base.scss
+++ b/packages/web-console/src/styles/_base.scss
@@ -239,6 +239,7 @@ ol.unstyled {
 /* FOOTER */
 
 #footer {
+  position: relative;
   display: flex;
   background: #21222c;
   flex: 0 0 4rem;