Merge pull request 'UI: fix overflow behavior sidebar' (#2475) from hsjobeki/clan-core:hsjobeki-main into main

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>
   );
 };

pkgs/webview-ui/app/src/layout/layout.tsx

@@ -32,7 +32,7 @@ export const Layout: Component<RouteSectionProps> = (props) => {
           {props.children}
         </div>
         <div
-          class="drawer-side z-40 h-full min-w-72 rounded-xl border opacity-95 bg-inv-2 border-inv-2"
+          class="drawer-side z-40 h-full !overflow-hidden"
           classList={{
             "!hidden":
               props.location.pathname === "welcome" || clanList().length === 0,
@@ -41,7 +41,7 @@ export const Layout: Component<RouteSectionProps> = (props) => {
           <label
             for="toplevel-drawer"
             aria-label="close sidebar"
-            class="drawer-overlay"
+            class="drawer-overlay !h-full !overflow-hidden "
           ></label>
           <Sidebar {...props} />
         </div>