From 9f6e65cb9dcff2fff756763c44b2f7e402fe9df3 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Wed, 12 Jun 2024 21:43:49 +0800
Subject: [PATCH] resize the shortcuts tree view

---
 .../components/templates/navMenu/NavigationMenu.tsx   | 11 ++++++++---
 packages/web/package.json                             |  3 ++-
 yarn.lock                                             |  2 +-
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/packages/web/components/templates/navMenu/NavigationMenu.tsx b/packages/web/components/templates/navMenu/NavigationMenu.tsx
index 2f02eb8e0..ebe18b1cd 100644
--- a/packages/web/components/templates/navMenu/NavigationMenu.tsx
+++ b/packages/web/components/templates/navMenu/NavigationMenu.tsx
@@ -39,6 +39,7 @@ import { NavMoreButtonUpIcon } from '../../elements/icons/NavMoreButtonUp'
 import { ShortcutFolderClosed } from '../../elements/icons/ShortcutFolderClosed'
 import { TrashSectionIcon } from '../../elements/icons/TrashSectionIcon'
 import { ShortcutFolderOpen } from '../../elements/icons/ShortcutFolderOpen'
+import useResizeObserver from 'use-resize-observer'
 
 export const LIBRARY_LEFT_MENU_WIDTH = '275px'
 
@@ -356,6 +357,8 @@ const Shortcuts = (props: NavigationMenuProps): JSX.Element => {
       </HStack>
       <Box
         css={{
+          width: '100%',
+          height: '100%',
           '[role="treeitem"]': {
             outline: 'none',
           },
@@ -456,6 +459,7 @@ const cachedShortcutsData = (): Shortcut[] | undefined => {
 
 const ShortcutsTree = (props: ShortcutsTreeProps): JSX.Element => {
   const router = useRouter()
+  const { ref, width, height } = useResizeObserver()
 
   const { isValidating, data } = useSWR('/api/shortcuts', getShortcuts, {
     fallbackData: cachedShortcutsData(),
@@ -562,7 +566,7 @@ const ShortcutsTree = (props: ShortcutsTreeProps): JSX.Element => {
   )
 
   return (
-    <>
+    <div ref={ref}>
       {!isValidating && (
         <Tree
           ref={props.treeRef}
@@ -575,12 +579,13 @@ const ShortcutsTree = (props: ShortcutsTreeProps): JSX.Element => {
           onActivate={onActivate}
           rowHeight={36}
           initialOpenState={folderOpenState}
-          width={275}
+          width={width}
+          height={640}
         >
           {NodeRenderer}
         </Tree>
       )}
-    </>
+    </div>
   )
 }
 
diff --git a/packages/web/package.json b/packages/web/package.json
index bb1d23f49..bc7ba1258 100644
--- a/packages/web/package.json
+++ b/packages/web/package.json
@@ -67,6 +67,7 @@
     "remark-gfm": "^3.0.1",
     "sharp": "^0.32.6",
     "swr": "^2.2.5",
+    "use-resize-observer": "^9.1.0",
     "uuid": "^8.3.2",
     "yet-another-react-lightbox": "^3.12.0"
   },
@@ -108,4 +109,4 @@
   "volta": {
     "extends": "../../package.json"
   }
-}
\ No newline at end of file
+}
diff --git a/yarn.lock b/yarn.lock
index aad75218f..549cbf289 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -31183,7 +31183,7 @@ use-latest@^1.0.0:
   dependencies:
     use-isomorphic-layout-effect "^1.0.0"
 
-use-resize-observer@^9.0.0:
+use-resize-observer@^9.0.0, use-resize-observer@^9.1.0:
   version "9.1.0"
   resolved "https://registry.yarnpkg.com/use-resize-observer/-/use-resize-observer-9.1.0.tgz#14735235cf3268569c1ea468f8a90c5789fc5c6c"
   integrity sha512-R25VqO9Wb3asSD4eqtcxk8sJalvIOYBqS8MNZlpDSQ4l4xMQxC/J7Id9HoTqPq8FwULIn0PVW+OAqF2dyYbjow==