Fix layout positioning

questdb · Oct 3, 2023 · baea808 · baea808
1 parent b54797d
commit baea808
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 4 deletions.
diff --git a/packages/web-console/src/components/TableSchemaDialog/dialog.tsx b/packages/web-console/src/components/TableSchemaDialog/dialog.tsx
@@ -159,6 +159,7 @@ export const Dialog = ({
 
   return (
     <Drawer
+      mode="side"
       title={
         <Box gap="0.5rem">
           <StyledTableIcon size="20px" />

diff --git a/packages/web-console/src/scenes/Editor/Menu/index.tsx b/packages/web-console/src/scenes/Editor/Menu/index.tsx
@@ -321,7 +321,12 @@ const Menu = () => {
           mode="side"
           title="QuestDB News"
           withCloseButton
-          onOpenChange={setNewsOpened}
+          onOpenChange={(newsOpened) => {
+            setNewsOpened(newsOpened)
+            dispatch(
+              actions.console.setActivePanel(newsOpened ? "news" : "console"),
+            )
+          }}
           trigger={
             <IconWithTooltip
               icon={

diff --git a/packages/web-console/src/scenes/Layout/index.tsx b/packages/web-console/src/scenes/Layout/index.tsx
@@ -55,8 +55,9 @@ const Root = styled.div`
   height: 100%;
 `
 
-const Main = styled.div`
+const Main = styled.div<{ sideOpened: boolean }>`
   flex: 1;
+  width: ${({ sideOpened }) => (sideOpened ? "calc(100% - 50rem)" : "100%")};
 `
 
 const Drawer = styled.div`
@@ -73,9 +74,14 @@ const Layout = () => {
   return (
     <QuestProvider>
       <Root>
-        <Main>
+        <Main sideOpened={activePanel === "news"}>
           <Page
-            style={{ display: activePanel === "console" ? "flex" : "none" }}
+            style={{
+              display:
+                activePanel === "console" || activePanel === "news"
+                  ? "flex"
+                  : "none",
+            }}
           >
             <Console />
           </Page>