Microsoft/vscode
1
0
Fork 0
mirror of https://github.com/microsoft/vscode.git synced 2026-02-15 07:28:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix welcome page session grid layout to use ITEM_HEIGHT (#294309)

Browse Source 
Fix welcome page session grid layout to match ITEM_HEIGHT (44px)
This commit is contained in:
David Dossett
2026-02-11 10:27:28 -08:00
committed by GitHub
parent bd0b2d369c
commit abfdc25d69
3 changed files with 13 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/vs/workbench/contrib/chat/browser/agentSessions/media/agentsessionsviewer.css
View File

@@ -9,7 +9,7 @@
height: 100%;
min-height: 0;
.monaco-scrollable-element {
.pane-body & .monaco-scrollable-element {
padding: 0 6px;
}

9
src/vs/workbench/contrib/welcomeAgentSessions/browser/agentSessionsWelcome.ts
View File

@@ -47,6 +47,7 @@ import { ChatSessionPosition, getResourceForNewChatSession } from '../../chat/br
import { IChatEntitlementService } from '../../../services/chat/common/chatEntitlementService.js';
import { AgentSessionsControl, IAgentSessionsControlOptions } from '../../chat/browser/agentSessions/agentSessionsControl.js';
import { AgentSessionsFilter } from '../../chat/browser/agentSessions/agentSessionsFilter.js';
import { AgentSessionsListDelegate } from '../../chat/browser/agentSessions/agentSessionsViewer.js';
import { HoverPosition } from '../../../../base/browser/ui/hover/hoverWidget.js';
import { IResolvedWalkthrough, IWalkthroughsService } from '../../welcomeGettingStarted/browser/gettingStartedService.js';
import { GettingStartedEditorOptions, GettingStartedInput } from '../../welcomeGettingStarted/browser/gettingStartedInput.js';
@@ -815,19 +816,19 @@ export class AgentSessionsWelcomePage extends EditorPane {
// TODO: @osortega this is a weird way of doing this, maybe we handle the 2-colum layout in the control itself?
const sessionsWidth = Math.min(800, this.lastDimension.width - 80);
// Calculate height based on actual visible sessions (capped at MAX_SESSIONS)
// Use 54px per item from AgentSessionsListDelegate.ITEM_HEIGHT
// Use ITEM_HEIGHT per item from AgentSessionsListDelegate
// Give the list FULL height so virtualization renders all items
// CSS transforms handle the 2-column visual layout
const visibleSessions = Math.min(
this.agentSessionsService.model.sessions.filter(s => !s.isArchived()).length,
MAX_SESSIONS
);
const sessionsHeight = visibleSessions * 56;
const sessionsHeight = visibleSessions * AgentSessionsListDelegate.ITEM_HEIGHT;
this.sessionsControl.layout(sessionsHeight, sessionsWidth);
// Set margin offset for 2-column layout: actual height - visual height
// Visual height = ceil(n/2) * 52, so offset = floor(n/2) * 52
const marginOffset = Math.floor(visibleSessions / 2) * 52;
// Visual height = ceil(n/2) * ITEM_HEIGHT, so offset = floor(n/2) * ITEM_HEIGHT
const marginOffset = Math.floor(visibleSessions / 2) * AgentSessionsListDelegate.ITEM_HEIGHT;
this.sessionsControl.element!.style.marginBottom = `-${marginOffset}px`;
}

14
src/vs/workbench/contrib/welcomeAgentSessions/browser/media/agentSessionsWelcome.css
View File

@@ -168,31 +168,31 @@
* Each pair forms a visual row.
* Left column items need to move up by floor((index-1)/2) rows
* Right column items need to move right and up by (index/2) rows
* Row height is 52px.
* Row height is 44px.
*/
/* Left column items (odd positions): move up to form 2-column layout */
/* Item 3: move up 1 row */
.agentSessionsWelcome-sessionsGrid .monaco-list-row:nth-child(3) {
transform: translateY(-52px);
transform: translateY(-44px);
}
/* Item 5: move up 2 rows */
.agentSessionsWelcome-sessionsGrid .monaco-list-row:nth-child(5) {
transform: translateY(-104px);
transform: translateY(-88px);
}
/* Right column items (even positions): move right and up */
/* Item 2: move right, up 1 row */
.agentSessionsWelcome-sessionsGrid .monaco-list-row:nth-child(2) {
transform: translateX(100%) translateY(-52px);
transform: translateX(100%) translateY(-44px);
}
/* Item 4: move right, up 2 rows */
.agentSessionsWelcome-sessionsGrid .monaco-list-row:nth-child(4) {
transform: translateX(100%) translateY(-104px);
transform: translateX(100%) translateY(-88px);
}
/* Item 6: move right, up 3 rows */
.agentSessionsWelcome-sessionsGrid .monaco-list-row:nth-child(6) {
transform: translateX(100%) translateY(-156px);
transform: translateX(100%) translateY(-132px);
}
/* Style individual session items in the welcome page */
@@ -482,7 +482,7 @@
gap: 12px;
padding: 8px 12px 8px 8px;
border-radius: 4px;
height: 52px;
height: 44px;
box-sizing: border-box;
}