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;