From 0cc9b91ae8b4da7a3e26ee357c2515933559dd85 Mon Sep 17 00:00:00 2001
From: Brian McGee <brian@bmcgee.ie>
Date: Thu, 28 Aug 2025 15:56:37 +0100
Subject: [PATCH 1/2] fix(ui): quirks with sidebar sizing

---
 .../clan-app/ui/src/components/Sidebar/Sidebar.module.css | 6 +-----
 pkgs/clan-app/ui/src/components/Sidebar/Sidebar.tsx       | 5 ++++-
 pkgs/clan-app/ui/src/routes/Clan/Clan.module.css          | 8 +++-----
 pkgs/clan-app/ui/src/routes/Clan/Clan.tsx                 | 4 +++-
 4 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/pkgs/clan-app/ui/src/components/Sidebar/Sidebar.module.css b/pkgs/clan-app/ui/src/components/Sidebar/Sidebar.module.css
index 5555e60ea..1bd45f388 100644
--- a/pkgs/clan-app/ui/src/components/Sidebar/Sidebar.module.css
+++ b/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;
 }
diff --git a/pkgs/clan-app/ui/src/components/Sidebar/Sidebar.tsx b/pkgs/clan-app/ui/src/components/Sidebar/Sidebar.tsx
index b765a0d81..08b1eeecd 100644
--- a/pkgs/clan-app/ui/src/components/Sidebar/Sidebar.tsx
+++ b/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>
   );
 };
diff --git a/pkgs/clan-app/ui/src/routes/Clan/Clan.module.css b/pkgs/clan-app/ui/src/routes/Clan/Clan.module.css
index 3bad3090c..41b6d5441 100644
--- a/pkgs/clan-app/ui/src/routes/Clan/Clan.module.css
+++ b/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);
 }
diff --git a/pkgs/clan-app/ui/src/routes/Clan/Clan.tsx b/pkgs/clan-app/ui/src/routes/Clan/Clan.tsx
index e2a3d15d7..5c0bbce3e 100644
--- a/pkgs/clan-app/ui/src/routes/Clan/Clan.tsx
+++ b/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>

From 92eb27fcb15c7a2b6a8df4afc18bfb01dfa37586 Mon Sep 17 00:00:00 2001
From: Brian McGee <brian@bmcgee.ie>
Date: Thu, 28 Aug 2025 16:12:11 +0100
Subject: [PATCH 2/2] feat(ui): reduce size of sidebar when selecting a machine

---
 .../ui/src/components/Sidebar/Sidebar.tsx     |  3 +-
 .../ui/src/components/Sidebar/SidebarPane.css |  6 ++--
 .../src/components/Sidebar/SidebarSection.css |  2 +-
 .../ui/src/routes/Clan/Clan.module.css        | 31 +++++++++++++++++++
 pkgs/clan-app/ui/src/routes/Clan/Clan.tsx     |  7 ++++-
 .../ui/src/routes/Machine/Machine.module.css  |  6 ++--
 .../ui/src/routes/Machine/Machine.tsx         | 25 ++++++++-------
 7 files changed, 59 insertions(+), 21 deletions(-)

diff --git a/pkgs/clan-app/ui/src/components/Sidebar/Sidebar.tsx b/pkgs/clan-app/ui/src/components/Sidebar/Sidebar.tsx
index 08b1eeecd..b687da6fd 100644
--- a/pkgs/clan-app/ui/src/components/Sidebar/Sidebar.tsx
+++ b/pkgs/clan-app/ui/src/components/Sidebar/Sidebar.tsx
@@ -2,7 +2,8 @@ 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";
+import { Show, splitProps } from "solid-js";
+import { useMachineName } from "@/src/hooks/clan";
 
 export interface LinkProps {
   path: string;
diff --git a/pkgs/clan-app/ui/src/components/Sidebar/SidebarPane.css b/pkgs/clan-app/ui/src/components/Sidebar/SidebarPane.css
index 797485eed..2591684a3 100644
--- a/pkgs/clan-app/ui/src/components/Sidebar/SidebarPane.css
+++ b/pkgs/clan-app/ui/src/components/Sidebar/SidebarPane.css
@@ -1,10 +1,10 @@
 div.sidebar-pane {
-  @apply border-none z-10;
+  @apply flex flex-col border-none z-20 h-full;
 
   animation: sidebarPaneShow 250ms ease-in forwards;
 
   &.open {
-    @apply w-60;
+    @apply w-72;
   }
 
   &.closing {
@@ -90,7 +90,7 @@ div.sidebar-pane {
     @apply opacity-100;
   }
   100% {
-    @apply w-60;
+    @apply w-72;
   }
 }
 
diff --git a/pkgs/clan-app/ui/src/components/Sidebar/SidebarSection.css b/pkgs/clan-app/ui/src/components/Sidebar/SidebarSection.css
index faf6c421f..b7b7fd943 100644
--- a/pkgs/clan-app/ui/src/components/Sidebar/SidebarSection.css
+++ b/pkgs/clan-app/ui/src/components/Sidebar/SidebarSection.css
@@ -1,5 +1,5 @@
 div.sidebar-section {
-  @apply flex flex-col gap-2 w-full h-fit;
+  @apply flex flex-col gap-2 w-full h-full;
 
   & > div.header {
     @apply flex items-center justify-between px-1.5;
diff --git a/pkgs/clan-app/ui/src/routes/Clan/Clan.module.css b/pkgs/clan-app/ui/src/routes/Clan/Clan.module.css
index 41b6d5441..c24ac0585 100644
--- a/pkgs/clan-app/ui/src/routes/Clan/Clan.module.css
+++ b/pkgs/clan-app/ui/src/routes/Clan/Clan.module.css
@@ -10,4 +10,35 @@
 .sidebarContainer {
   @apply absolute left-4 top-4 w-60 z-10;
   height: calc(100vh - 2rem);
+
+  animation: sidebarNoMachine 250ms ease-in-out;
+
+  &.machineSelected {
+    @apply top-16;
+    height: calc(100vh - 8rem);
+
+    animation: sidebarMachine 250ms ease-in-out;
+  }
+}
+
+@keyframes sidebarNoMachine {
+  0% {
+    @apply top-16;
+    height: calc(100vh - 8rem);
+  }
+  100% {
+    @apply top-4;
+    height: calc(100vh - 2rem);
+  }
+}
+
+@keyframes sidebarMachine {
+  0% {
+    @apply top-4;
+    height: calc(100vh - 2rem);
+  }
+  100% {
+    @apply top-16;
+    height: calc(100vh - 8rem);
+  }
 }
diff --git a/pkgs/clan-app/ui/src/routes/Clan/Clan.tsx b/pkgs/clan-app/ui/src/routes/Clan/Clan.tsx
index 5c0bbce3e..3bdfb2a06 100644
--- a/pkgs/clan-app/ui/src/routes/Clan/Clan.tsx
+++ b/pkgs/clan-app/ui/src/routes/Clan/Clan.tsx
@@ -14,6 +14,7 @@ import {
   buildMachinePath,
   maybeUseMachineName,
   useClanURI,
+  useMachineName,
 } from "@/src/hooks/clan";
 import { CubeScene } from "@/src/scene/cubes";
 import {
@@ -119,7 +120,11 @@ export const Clan: Component<RouteSectionProps> = (props) => {
         )
       }
     >
-      <div class={styles.sidebarContainer}>
+      <div
+        class={cx(styles.sidebarContainer, {
+          [styles.machineSelected]: useMachineName(),
+        })}
+      >
         <Sidebar />
       </div>
       {props.children}
diff --git a/pkgs/clan-app/ui/src/routes/Machine/Machine.module.css b/pkgs/clan-app/ui/src/routes/Machine/Machine.module.css
index 5ab12d376..408677bc4 100644
--- a/pkgs/clan-app/ui/src/routes/Machine/Machine.module.css
+++ b/pkgs/clan-app/ui/src/routes/Machine/Machine.module.css
@@ -1,5 +1,5 @@
-.sidebarPane {
-  @apply absolute left-[16.5rem] top-[5.5rem] w-64;
+.sidebarPaneContainer {
+  @apply absolute left-[16.5rem] top-4 w-64 z-20;
 
-  height: calc(100vh - 14.5rem);
+  height: calc(100vh - 2rem);
 }
diff --git a/pkgs/clan-app/ui/src/routes/Machine/Machine.tsx b/pkgs/clan-app/ui/src/routes/Machine/Machine.tsx
index 9fff47a40..00f1cec09 100644
--- a/pkgs/clan-app/ui/src/routes/Machine/Machine.tsx
+++ b/pkgs/clan-app/ui/src/routes/Machine/Machine.tsx
@@ -52,18 +52,19 @@ export const Machine = (props: RouteSectionProps) => {
     const sectionProps = { clanURI, machineName, onSubmit, machineQuery };
 
     return (
-      <SidebarPane
-        class={cx(styles.sidebarPane)}
-        title={machineName}
-        onClose={onClose}
-        subHeader={() => (
-          <SidebarMachineStatus clanURI={clanURI} machineName={machineName} />
-        )}
-      >
-        <SidebarSectionInstall clanURI={clanURI} machineName={machineName} />
-        <SectionGeneral {...sectionProps} />
-        <SectionTags {...sectionProps} />
-      </SidebarPane>
+      <div class={styles.sidebarPaneContainer}>
+        <SidebarPane
+          title={machineName}
+          onClose={onClose}
+          subHeader={() => (
+            <SidebarMachineStatus clanURI={clanURI} machineName={machineName} />
+          )}
+        >
+          <SidebarSectionInstall clanURI={clanURI} machineName={machineName} />
+          <SectionGeneral {...sectionProps} />
+          <SectionTags {...sectionProps} />
+        </SidebarPane>
+      </div>
     );
   };