fix: sidebar collapse width, CRUD height overflow, dashboard VScrollPanel

wwwroot/index.ui

@@ -5,6 +5,12 @@
         "height": "100%"
     },
     "subwidgets": [
+        {
+            "widgettype": "VScrollPanel",
+            "options": {
+                "css": "filler"
+            },
+            "subwidgets": [
         {
             "widgettype": "HBox",
             "options": {
@@ -530,5 +536,7 @@
                 }
             ]
         }
+            ]
+        }
     ]
 }

wwwroot/shell_theme.css

@@ -178,11 +178,12 @@ body {
 
 .sage-main {
   flex: 1;
-  overflow-y: auto;
+  overflow: hidden;
   overflow-x: hidden;
   padding: 24px;
   background-color: var(--sage-bg-primary);
   min-width: 0; /* Prevent flex item from overflowing */
+  min-height: 0; /* Allow flex children to shrink below content size */
   transition: margin-left 0.3s ease;
 }
 

wwwroot/shell_theme.js

@@ -51,6 +51,7 @@
     var sidebar = document.getElementById('sage_sidebar');
     if (sidebar && collapsed) {
       sidebar.classList.add('collapsed');
+      sidebar.style.width = '64px';
     }
   }
 
@@ -61,6 +62,7 @@
     
     if (isMobile() && !sidebar.classList.contains('collapsed')) {
       sidebar.classList.add('collapsed');
+      sidebar.style.width = '64px';
       try { localStorage.setItem(SIDEBAR_KEY, 'true'); } catch(e) {}
       updateSidebarIcon(true);
     }
@@ -81,6 +83,7 @@
       // If click is outside sidebar and toggle button, close sidebar
       if (!sidebar.contains(e.target) && (!toggleBtn || !toggleBtn.contains(e.target))) {
         sidebar.classList.add('collapsed');
+        sidebar.style.width = '64px';
         try { localStorage.setItem(SIDEBAR_KEY, 'true'); } catch(ex) {}
         updateSidebarIcon(true);
       }
@@ -105,6 +108,8 @@
     var isCollapsed = sidebar.classList.contains('collapsed');
     try { localStorage.setItem(SIDEBAR_KEY, isCollapsed); } catch(e) {}
     updateSidebarIcon(isCollapsed);
+    // Override inline width style (bricks sets inline style which beats CSS class)
+    sidebar.style.width = isCollapsed ? '64px' : '240px';
     // Toggle Menu widget collapse state
     if (typeof bricks !== 'undefined') {
       var menu = bricks.getWidgetById('global_nav_menu', bricks.app);
@@ -151,8 +156,9 @@
       var w = await bricks.widgetBuild(desc, sidebar);
       if (w) {
         sidebar.addSubWidget(w);
-        // Re-apply collapsed state to newly built menu
+        // Re-apply collapsed state and inline width to newly built menu
         if (isCollapsed) {
+          sidebar.el.style.width = '64px';
           var menu = bricks.getWidgetById('global_nav_menu', bricks.app);
           if (menu && menu.collapse) {
             menu.collapse();
@@ -201,6 +207,8 @@
     if (btn && sidebar) {
       var isCollapsed = sidebar.classList.contains('collapsed');
       updateSidebarIcon(isCollapsed);
+      // Sync inline width with collapsed state (bricks may have overridden it)
+      sidebar.style.width = isCollapsed ? '64px' : '240px';
       // Apply collapsed state to Menu if sidebar was already collapsed
       if (isCollapsed && typeof bricks !== 'undefined') {
         var menu = bricks.getWidgetById('global_nav_menu', bricks.app);