UI: fix overflow behavior sidebar

pkgs/webview-ui/app/src/components/Sidebar/css/sidebar.css

@@ -6,6 +6,15 @@
 @import "./sidebar-profile";
 
 /* Sidebar Structure */
+
+.sidebar {
+  min-width: theme(width.72);
+  height: 100%;
+  background-color: var(--clr-bg-inv-2);
+  border: 1px solid var(--clr-border-inv-2);
+  border-radius: theme(borderRadius.xl);
+}
+
 .sidebar__body {
   display: flex;
   flex-direction: column;

pkgs/webview-ui/app/src/components/Sidebar/index.tsx

@@ -56,14 +56,14 @@ export const Sidebar = (props: RouteSectionProps) => {
   }));
 
   return (
-    <>
+    <div class="sidebar opacity-95">
       <Show
         when={query.data}
         fallback={<SidebarHeader clanName={"Untitled"} />}
       >
         {(meta) => <SidebarHeader clanName={meta().name} />}
       </Show>
-      <div class="sidebar__body overflow-y-scroll">
+      <div class="sidebar__body max-h-[calc(100vh-4rem)] overflow-scroll">
         <For each={routes.filter((r) => !r.hidden && r.path != "/clans")}>
           {(route: AppRoute) => (
             <Show
@@ -90,6 +90,6 @@ export const Sidebar = (props: RouteSectionProps) => {
           )}
         </For>
       </div>
-    </>
+    </div>
   );
 };