diff --git a/wwwroot/index.ui b/wwwroot/index.ui index 9b73664..019c10f 100644 --- a/wwwroot/index.ui +++ b/wwwroot/index.ui @@ -5,6 +5,12 @@ "height": "100%" }, "subwidgets": [ + { + "widgettype": "VScrollPanel", + "options": { + "css": "filler" + }, + "subwidgets": [ { "widgettype": "HBox", "options": { @@ -530,5 +536,7 @@ } ] } + ] + } ] } \ No newline at end of file diff --git a/wwwroot/shell_theme.css b/wwwroot/shell_theme.css index cfdce39..8028d26 100644 --- a/wwwroot/shell_theme.css +++ b/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; } diff --git a/wwwroot/shell_theme.js b/wwwroot/shell_theme.js index 91f0bc6..229c5ac 100644 --- a/wwwroot/shell_theme.js +++ b/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);