From 603653574cfca7667406ad4701602fb65e452fe6 Mon Sep 17 00:00:00 2001
From: Jon Staab <shtaab@gmail.com>
Date: Thu, 21 Nov 2024 14:25:57 -0800
Subject: [PATCH] fix scrolling in sidebar

---
 src/app/components/MenuSpace.svelte           | 66 ++++++++++---------
 src/lib/components/SecondaryNavSection.svelte |  2 +-
 2 files changed, 35 insertions(+), 33 deletions(-)

diff --git a/src/app/components/MenuSpace.svelte b/src/app/components/MenuSpace.svelte
index 1126368..9e86ac5 100644
--- a/src/app/components/MenuSpace.svelte
+++ b/src/app/components/MenuSpace.svelte
@@ -69,7 +69,7 @@
 </script>
 
 <div bind:this={element}>
-  <SecondaryNavSection>
+  <SecondaryNavSection class="max-h-screen">
     <div>
       <SecondaryNavItem class="w-full !justify-between" on:click={openMenu}>
         <strong>{displayRelayUrl(url)}</strong>
@@ -109,37 +109,39 @@
         </Popover>
       {/if}
     </div>
-    <SecondaryNavItem href={makeSpacePath(url)}>
-      <Icon icon="home-smile" /> Home
-    </SecondaryNavItem>
-    <SecondaryNavItem href={threadsPath} notification={$threadsNotification}>
-      <Icon icon="notes-minimalistic" /> Threads
-    </SecondaryNavItem>
-    <div class="h-2" />
-    <SecondaryNavHeader>Your Rooms</SecondaryNavHeader>
-    <MenuSpaceRoomItem {url} room={GENERAL} />
-    {#each rooms as room, i (room)}
-      <MenuSpaceRoomItem {url} {room} />
-    {/each}
-    {#if otherRooms.length > 0}
-      <div class="h-2" />
-      <SecondaryNavHeader>
-        {#if rooms.length > 0}
-          Other Rooms
-        {:else}
-          Rooms
-        {/if}
-      </SecondaryNavHeader>
-    {/if}
-    {#each otherRooms as room, i (room)}
-      <SecondaryNavItem href={makeSpacePath(url, room)}>
-        <Icon icon="hashtag" />
-        {room}
+    <div class="min-h-0 overflow-auto">
+      <SecondaryNavItem href={makeSpacePath(url)}>
+        <Icon icon="home-smile" /> Home
       </SecondaryNavItem>
-    {/each}
-    <SecondaryNavItem on:click={addRoom}>
-      <Icon icon="add-circle" />
-      Create room
-    </SecondaryNavItem>
+      <SecondaryNavItem href={threadsPath} notification={$threadsNotification}>
+        <Icon icon="notes-minimalistic" /> Threads
+      </SecondaryNavItem>
+      <div class="h-2" />
+      <SecondaryNavHeader>Your Rooms</SecondaryNavHeader>
+      <MenuSpaceRoomItem {url} room={GENERAL} />
+      {#each rooms as room, i (room)}
+        <MenuSpaceRoomItem {url} {room} />
+      {/each}
+      {#if otherRooms.length > 0}
+        <div class="h-2" />
+        <SecondaryNavHeader>
+          {#if rooms.length > 0}
+            Other Rooms
+          {:else}
+            Rooms
+          {/if}
+        </SecondaryNavHeader>
+      {/if}
+      {#each otherRooms as room, i (room)}
+        <SecondaryNavItem href={makeSpacePath(url, room)}>
+          <Icon icon="hashtag" />
+          {room}
+        </SecondaryNavItem>
+      {/each}
+      <SecondaryNavItem on:click={addRoom}>
+        <Icon icon="add-circle" />
+        Create room
+      </SecondaryNavItem>
+    </div>
   </SecondaryNavSection>
 </div>
diff --git a/src/lib/components/SecondaryNavSection.svelte b/src/lib/components/SecondaryNavSection.svelte
index eae9f52..c36b586 100644
--- a/src/lib/components/SecondaryNavSection.svelte
+++ b/src/lib/components/SecondaryNavSection.svelte
@@ -1,3 +1,3 @@
-<div class="flex flex-col gap-1 px-2 py-4">
+<div class="flex flex-col gap-1 px-2 py-4 {$$props.class}">
   <slot />
 </div>