Make the left sidebar scrollable to view all the content

src/lib/components/LeftSidebar.svelte

@@ -29,12 +29,38 @@
   const activeAbout = $derived(
     groupsStore.list.find((g) => g.id === activeRoom)?.about ?? "",
   );
+
+  // Bottom fade shown while the nav has more content below the fold.
+  let navEl = $state<HTMLElement | null>(null);
+  let moreBelow = $state(false);
+
+  function updateFade() {
+    const el = navEl;
+    if (!el) return;
+    moreBelow = el.scrollTop + el.clientHeight < el.scrollHeight - 1;
+  }
+
+  $effect(() => {
+    const el = navEl;
+    if (!el) return;
+    const ro = new ResizeObserver(updateFade);
+    ro.observe(el);
+    for (const child of el.children) ro.observe(child);
+    return () => ro.disconnect();
+  });
 </script>
 
 <aside
-  class="hidden max-w-52 min-w-48 shrink-0 flex-col justify-between pr-1 pb-8 pl-8 md:flex md:pt-6"
+  class="hidden max-w-52 min-w-48 shrink-0 flex-col justify-between pr-1 pb-8 pl-8 md:flex md:min-h-0 md:pt-6"
 >
-  <div>
+  <!-- Own scroll container so a long about/rooms list never pushes the
+     account row off screen (the page wrapper clips overflow). -->
+  <div class="relative min-h-0 flex-1">
+    <div
+      bind:this={navEl}
+      onscroll={updateFade}
+      class="no-scrollbar h-full overflow-y-auto"
+    >
       <a
         href="/"
         class="mt-3 mb-6 flex min-w-0 flex-col hover:opacity-90"
@@ -144,6 +170,13 @@
         >
       </nav>
     </div>
+    <div
+      class="pointer-events-none absolute inset-x-0 bottom-0 h-10 bg-gradient-to-b from-transparent to-neutral-100 transition-opacity dark:to-neutral-800 {moreBelow
+        ? 'opacity-100'
+        : 'opacity-0'}"
+      aria-hidden="true"
+    ></div>
+  </div>
 
   <div class="flex flex-col gap-2">
     {#if draftState.iconized}