sessions: fix sidebar layout when customizations toolbar changes (#306314)

* sessions: fix sidebar layout when customizations toolbar changes

- Listen to toolbar's onDidChangeMenuItems to trigger re-layout when
  items are added/removed (e.g., Plugins appearing after extension
  activation)
- Remove redundant height: 100% from sessions-list-control (flex
  sizing handles this)
- Reduce sessions section bottom margin from 12px to 6px
- Rename onDidToggleCollapse to onDidChangeLayout to reflect broader
  layout change handling

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

* Update src/vs/sessions/contrib/sessions/browser/media/sessionsList.css

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

---------

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
This commit is contained in:
Sandeep Somavarapu
2026-03-30 14:45:47 +02:00
committed by GitHub
parent 837894c241
commit 29f5047784
3 changed files with 10 additions and 5 deletions

View File

@@ -29,7 +29,7 @@ const $ = DOM.$;
const CUSTOMIZATIONS_COLLAPSED_KEY = 'agentSessions.customizationsCollapsed';
export interface IAICustomizationShortcutsWidgetOptions {
readonly onDidToggleCollapse?: () => void;
readonly onDidChangeLayout?: () => void;
}
export class AICustomizationShortcutsWidget extends Disposable {
@@ -86,12 +86,17 @@ export class AICustomizationShortcutsWidget extends Disposable {
// Toolbar container
const toolbarContainer = DOM.append(container, $('.ai-customization-toolbar-content.sidebar-action-list'));
this._register(this.instantiationService.createInstance(MenuWorkbenchToolBar, toolbarContainer, Menus.SidebarCustomizations, {
const toolbar = this._register(this.instantiationService.createInstance(MenuWorkbenchToolBar, toolbarContainer, Menus.SidebarCustomizations, {
hiddenItemStrategy: HiddenItemStrategy.NoHide,
toolbarOptions: { primaryGroup: () => true },
telemetrySource: 'sidebarCustomizations',
}));
// Re-layout when toolbar items change (e.g., Plugins item appearing after extension activation)
this._register(toolbar.onDidChangeMenuItems(() => {
options?.onDidChangeLayout?.();
}));
let updateCountRequestId = 0;
const updateHeaderTotalCount = async () => {
const requestId = ++updateCountRequestId;
@@ -130,7 +135,7 @@ export class AICustomizationShortcutsWidget extends Disposable {
// Re-layout after the transition
transitionListener.value = DOM.addDisposableListener(toolbarContainer, 'transitionend', () => {
transitionListener.clear();
options?.onDidToggleCollapse?.();
options?.onDidChangeLayout?.();
});
};

View File

@@ -40,7 +40,7 @@
flex: 1;
overflow: hidden;
min-height: 0;
margin-bottom: 12px;
margin-bottom: 6px;
}
.agent-sessions-header {

View File

@@ -224,7 +224,7 @@ export class SessionsView extends ViewPane {
// AI Customization toolbar (bottom, fixed height)
this._register(this.instantiationService.createInstance(AICustomizationShortcutsWidget, sessionsContainer, {
onDidToggleCollapse: () => {
onDidChangeLayout: () => {
if (this.viewPaneContainer) {
const { offsetHeight, offsetWidth } = this.viewPaneContainer;
this.layoutBody(offsetHeight, offsetWidth);