From 64af49e0b5e6412ed49070f0b0aa84c0a02cbafa Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Wed, 15 Apr 2026 22:09:10 +0200
Subject: [PATCH] fix: improve sidebar layout with scrollable sections and
 bottom-pinned admin

- Applications section: maxHeight 50vh with scroll overflow
- Starred section: maxHeight 30vh with scroll overflow
- Admin section: pinned to bottom of sidebar via position="bottom"
- Update design-system to 0.1.54 (sidebar section maxHeight, position props)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 ui/package-lock.json              | 8 ++++----
 ui/package.json                   | 2 +-
 ui/src/components/LayoutShell.tsx | 3 +++
 3 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/ui/package-lock.json b/ui/package-lock.json
index 38a158fe..5c8cea6e 100644
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -9,7 +9,7 @@
       "version": "0.0.0",
       "hasInstallScript": true,
       "dependencies": {
-        "@cameleer/design-system": "^0.1.52",
+        "@cameleer/design-system": "^0.1.54",
         "@tanstack/react-query": "^5.90.21",
         "js-yaml": "^4.1.1",
         "lucide-react": "^1.7.0",
@@ -281,9 +281,9 @@
       }
     },
     "node_modules/@cameleer/design-system": {
-      "version": "0.1.52",
-      "resolved": "https://gitea.siegeln.net/api/packages/cameleer/npm/%40cameleer%2Fdesign-system/-/0.1.52/design-system-0.1.52.tgz",
-      "integrity": "sha512-yhxZodFoqGbucNdjRtnlmTt+SI3csv0+nOf8nvD6hmsOjj0WhaqMjdj+hqPpc6EZu3UVEWjfeX+9d/1B7cyy0A==",
+      "version": "0.1.54",
+      "resolved": "https://gitea.siegeln.net/api/packages/cameleer/npm/%40cameleer%2Fdesign-system/-/0.1.54/design-system-0.1.54.tgz",
+      "integrity": "sha512-IX05JmY/JcxTndfDWBHF7uizrRSqJgEM/J5uv5vQerM+Zq02yUzVNcV4QufVYBevGdnI4acUScnDlmSOOb85Qg==",
       "dependencies": {
         "lucide-react": "^1.7.0",
         "react": "^19.0.0",
diff --git a/ui/package.json b/ui/package.json
index 93d6ec44..0615bc2c 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -15,7 +15,7 @@
     "postinstall": "node -e \"const fs=require('fs');fs.mkdirSync('public',{recursive:true});fs.copyFileSync('node_modules/@cameleer/design-system/assets/cameleer-logo.svg','public/favicon.svg')\""
   },
   "dependencies": {
-    "@cameleer/design-system": "^0.1.52",
+    "@cameleer/design-system": "^0.1.54",
     "@tanstack/react-query": "^5.90.21",
     "js-yaml": "^4.1.1",
     "lucide-react": "^1.7.0",
diff --git a/ui/src/components/LayoutShell.tsx b/ui/src/components/LayoutShell.tsx
index b8059c6c..3711037f 100644
--- a/ui/src/components/LayoutShell.tsx
+++ b/ui/src/components/LayoutShell.tsx
@@ -754,6 +754,7 @@ function LayoutContent() {
           label="Applications"
           open={appsOpen}
           onToggle={toggleApps}
+          maxHeight="50vh"
         >
           <SidebarTree
             nodes={appTreeNodes}
@@ -775,6 +776,7 @@ function LayoutContent() {
           label="Starred"
           open={starredOpen}
           onToggle={() => setStarredOpen((v) => !v)}
+          maxHeight="30vh"
         >
           <StarredList
             items={starredItems}
@@ -792,6 +794,7 @@ function LayoutContent() {
           open={adminOpen}
           onToggle={toggleAdmin}
           active={isAdminPage}
+          position="bottom"
         >
           <SidebarTree
             nodes={adminTreeNodes}