fix(ui): quirks with sidebar sizing

pkgs/clan-app/ui/src/components/Sidebar/Sidebar.module.css

@@ -1,7 +1,3 @@
 .sidebar {
-  @apply w-60 border-none z-10;
-
-  .body {
-    @apply pt-4 pb-3 px-2;
-  }
+  @apply w-60 border-none z-10 h-full flex flex-col;
 }

pkgs/clan-app/ui/src/components/Sidebar/Sidebar.tsx

@@ -2,6 +2,7 @@ import styles from "./Sidebar.module.css";
 import { SidebarHeader } from "@/src/components/Sidebar/SidebarHeader";
 import { SidebarBody } from "@/src/components/Sidebar/SidebarBody";
 import cx from "classnames";
+import { splitProps } from "solid-js";
 
 export interface LinkProps {
   path: string;
@@ -19,10 +20,12 @@ export interface SidebarProps {
 }
 
 export const Sidebar = (props: SidebarProps) => {
+  const [bodyProps] = splitProps(props, ["staticSections"]);
+
   return (
     <div class={cx(styles.sidebar, props.class)}>
       <SidebarHeader />
-      <SidebarBody class={cx(styles.body)} {...props} />
+      <SidebarBody {...bodyProps} />
     </div>
   );
 };

pkgs/clan-app/ui/src/routes/Clan/Clan.module.css

@@ -7,9 +7,7 @@
   @apply min-w-96;
 }
 
-.sidebar {
-  @apply absolute left-4 top-[2.25rem] w-60;
-  @apply min-h-96;
-
-  height: calc(100vh - 7.5rem);
+.sidebarContainer {
+  @apply absolute left-4 top-4 w-60 z-10;
+  height: calc(100vh - 2rem);
 }

pkgs/clan-app/ui/src/routes/Clan/Clan.tsx

@@ -119,7 +119,9 @@ export const Clan: Component<RouteSectionProps> = (props) => {
         )
       }
     >
-      <Sidebar class={cx(styles.sidebar)} />
+      <div class={styles.sidebarContainer}>
+        <Sidebar />
+      </div>
       {props.children}
       <ClanSceneController {...props} />
     </ClanContext.Provider>