From e064e58f7917e385809cbce3838266f6d06ad191 Mon Sep 17 00:00:00 2001
From: ftibi93 <ftibi93@gmail.com>
Date: Fri, 1 Nov 2024 10:41:23 +0100
Subject: [PATCH] Fix sidebar responsivity (#453)

* navbar height fix. has to be cleaned up
* use parent height for tree
* cleanups
---
 .../src/features/page/tree/components/space-tree.tsx   |  2 +-
 .../src/features/page/tree/styles/tree.module.css      |  8 +++++---
 .../space/components/sidebar/space-sidebar.module.css  | 10 ++++++++++
 .../space/components/sidebar/space-sidebar.tsx         |  2 +-
 4 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/apps/client/src/features/page/tree/components/space-tree.tsx b/apps/client/src/features/page/tree/components/space-tree.tsx
index 67e0d0e..ef67742 100644
--- a/apps/client/src/features/page/tree/components/space-tree.tsx
+++ b/apps/client/src/features/page/tree/components/space-tree.tsx
@@ -197,7 +197,7 @@ export default function SpaceTree({ spaceId, readOnly }: SpaceTreeProps) {
           disableEdit={readOnly}
           {...controllers}
           width={width}
-          height={height}
+          height={rootElement.current.clientHeight}
           ref={treeApiRef}
           openByDefault={false}
           disableMultiSelection={true}
diff --git a/apps/client/src/features/page/tree/styles/tree.module.css b/apps/client/src/features/page/tree/styles/tree.module.css
index de35ea7..0a258fb 100644
--- a/apps/client/src/features/page/tree/styles/tree.module.css
+++ b/apps/client/src/features/page/tree/styles/tree.module.css
@@ -3,10 +3,12 @@
 }
 
 .treeContainer {
-    display: flex;
-    height: 68vh;
-    flex: 1;
+    height: 100%;
     min-width: 0;
+
+    > div, > div > .tree {
+        height: 100% !important;
+    }
 }
 
 .node {
diff --git a/apps/client/src/features/space/components/sidebar/space-sidebar.module.css b/apps/client/src/features/space/components/sidebar/space-sidebar.module.css
index 9e26316..b4a9b17 100644
--- a/apps/client/src/features/space/components/sidebar/space-sidebar.module.css
+++ b/apps/client/src/features/space/components/sidebar/space-sidebar.module.css
@@ -18,6 +18,16 @@
     }
 }
 
+.sectionPages {
+    margin-bottom: 0;
+    overflow-y: hidden;
+
+    .pages {
+        height: 100%;
+        padding-bottom: 26px;
+    }
+}
+
 .menuItems {
     padding-left: calc(var(--mantine-spacing-md) - var(--mantine-spacing-xs));
     padding-right: calc(var(--mantine-spacing-md) - var(--mantine-spacing-xs));
diff --git a/apps/client/src/features/space/components/sidebar/space-sidebar.tsx b/apps/client/src/features/space/components/sidebar/space-sidebar.tsx
index ffaf0a9..0c45d3f 100644
--- a/apps/client/src/features/space/components/sidebar/space-sidebar.tsx
+++ b/apps/client/src/features/space/components/sidebar/space-sidebar.tsx
@@ -134,7 +134,7 @@ export function SpaceSidebar() {
           </div>
         </div>
 
-        <div className={classes.section}>
+        <div className={[classes.section, classes.sectionPages].join(' ')}>
           <Group className={classes.pagesHeader} justify="space-between">
             <Text size="xs" fw={500} c="dimmed">
               Pages