UI: fix overflow behavior sidebar/content

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

@@ -6,15 +6,6 @@
 @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

@@ -4,13 +4,10 @@ import { activeURI } from "@/src/App";
 import { createQuery } from "@tanstack/solid-query";
 import { callApi } from "@/src/api";
 import { AppRoute, routes } from "@/src/index";
-
-import { List } from "../Helpers";
 import { SidebarHeader } from "./SidebarHeader";
-
 import { SidebarListItem } from "./SidebarListItem";
-import "./css/sidebar.css";
 import { Typography } from "../Typography";
+import "./css/sidebar.css";
 
 export const SidebarSection = (props: {
   title: string;
@@ -59,14 +56,14 @@ export const Sidebar = (props: RouteSectionProps) => {
   }));
 
   return (
-    <div class="sidebar bg-transparent/95">
+    <>
       <Show
         when={query.data}
         fallback={<SidebarHeader clanName={"Untitled"} />}
       >
         {(meta) => <SidebarHeader clanName={meta().name} />}
       </Show>
-      <div class="sidebar__body">
+      <div class="sidebar__body overflow-y-scroll">
         <For each={routes.filter((r) => !r.hidden && r.path != "/clans")}>
           {(route: AppRoute) => (
             <Show
@@ -93,6 +90,6 @@ export const Sidebar = (props: RouteSectionProps) => {
           )}
         </For>
       </div>
-    </div>
+    </>
   );
 };

pkgs/webview-ui/app/src/index.css

@@ -65,7 +65,7 @@
 html {
   @apply font-sans;
   overflow-x: hidden;
-  overflow-y: scroll;
+  overflow-y: hidden;
 }
 
 .accordeon {

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

@@ -18,21 +18,21 @@ export const Layout: Component<RouteSectionProps> = (props) => {
   });
 
   return (
-    <div class="h-screen p-4 bg-def-3">
+    <div class="h-screen w-full p-4 bg-def-3">
       <div class="drawer h-full lg:drawer-open ">
         <input
           id="toplevel-drawer"
           type="checkbox"
           class="drawer-toggle hidden"
         />
-        <div class="drawer-content">
+        <div class="drawer-content overflow-x-hidden overflow-y-scroll">
           <Show when={props.location.pathname !== "welcome"}>
             <Header clan_dir={activeURI} />
           </Show>
           {props.children}
         </div>
         <div
-          class="drawer-side z-40 h-full"
+          class="drawer-side z-40 h-full min-w-72 rounded-xl border opacity-95 bg-inv-2 border-inv-2"
           classList={{
             "!hidden":
               props.location.pathname === "welcome" || clanList().length === 0,