Flexbox is like violence: if it doesn't work, you just need more of it

questdb · Oct 30, 2023 · 4160059 · 4160059
1 parent 798d505
commit 4160059
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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
@@ -239,6 +239,7 @@ ol.unstyled {
 /* FOOTER */
 
 #footer {
+  position: relative;
   display: flex;
   background: #21222c;
   flex: 0 0 4rem;