Skip to content

fix(web-ui): restore padding inside flow chat cards #1890

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
bobleer merged 1 commit into from
Jul 30, 2026
Merged

fix(web-ui): restore padding inside flow chat cards #1890

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 26 additions & 18 deletions src/web-ui/src/flow_chat/components/modern/FlowChatCollapseAlignment.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,8 @@ function extractBlock(stylesheet: string, selector: string): string {
return match?.groups?.body ?? '';
}

describe('FlowChat collapse leading-edge alignment', () => {
it('guards every shared collapse body against leading indentation', () => {
describe('FlowChat collapse spacing', () => {
it('keeps every shared collapse body on the same outer leading edge', () => {
const stylesheet = readSource('./VirtualMessageList.scss');
const projectionRoots = [
'.explore-region__content',
Expand All @@ -35,10 +35,10 @@ describe('FlowChat collapse leading-edge alignment', () => {
expect(stylesheet).toContain(selector);
}
expect(stylesheet).toContain('margin-inline-start: 0;');
expect(stylesheet).toContain('padding-inline-start: 0;');
expect(stylesheet).not.toContain('padding-inline-start: 0;');
});

it('keeps custom explore and thinking collapse bodies on their header edge', () => {
it('keeps unframed explore and thinking disclosures on their header edge', () => {
const exploreStyles = readSource('./ExploreRegion.scss');
const thinkingStyles = readSource('../../tool-cards/ModelThinkingDisplay.scss');
const exploreContent = extractBlock(exploreStyles, '.explore-region__content');
Expand All @@ -50,59 +50,67 @@ describe('FlowChat collapse leading-edge alignment', () => {
);
});

it('keeps tool, image, and subagent detail roots free of leading offsets', () => {
it('keeps bordered tool and subagent bodies padded on every side', () => {
const baseToolStyles = readSource('../../tool-cards/BaseToolCard.scss');
const compactToolStyles = readSource('../../tool-cards/CompactToolCard.scss');
const imageStyles = readSource('../../tool-cards/ViewImageToolCard.scss');
const subagentStyles = readSource('./SubagentItems.scss');
const subagentProjectionStyles = readSource('../subagent/SubagentProjectionView.scss');
const taskStyles = readSource('../../tool-cards/TaskToolDisplay.scss');

expect(extractBlock(baseToolStyles, '.base-tool-card-expanded')).toMatch(
/padding:\s*var\(--flowchat-card-expanded-pad-y\)\s*var\(--tool-card-expanded-pad-x\)\s*var\(--flowchat-card-expanded-pad-y\)\s*0;/,
/padding:\s*var\(--flowchat-card-expanded-pad-y\)\s*var\(--tool-card-expanded-pad-x\)\s*var\(--flowchat-card-expanded-pad-y\)\s*var\(--tool-card-expanded-pad-x\);/,
);
expect(extractBlock(baseToolStyles, '.base-tool-card-error')).toContain(
'margin-left: 0;',
);
expect(extractBlock(baseToolStyles, '.base-tool-card-error')).toMatch(
/padding:\s*var\(--flowchat-card-expanded-pad-y\)\s*var\(--flowchat-card-expanded-pad-x\)\s*var\(--flowchat-card-expanded-pad-y\)\s*var\(--flowchat-card-expanded-pad-x\);/,
);
expect(extractBlock(compactToolStyles, '.compact-tool-card-expanded')).toContain(
'margin-left: 0;',
);
expect(extractBlock(compactToolStyles, '.compact-tool-card-expanded')).toContain(
'padding: 12px;',
);
expect(extractBlock(compactToolStyles, '.flow-tool-card-note')).toContain(
'margin-left: 0;',
);
expect(extractBlock(imageStyles, '.view-image-tool-card__content')).toContain(
'margin: 8px 0 0;',
);
expect(extractBlock(subagentStyles, '.subagent-items-container')).toContain(
'padding: 10px 10px 10px 0;',
'padding: var(--flowchat-card-expanded-pad-y) var(--flowchat-card-expanded-pad-x);',
);
expect(
extractBlock(subagentProjectionStyles, '.subagent-projection-container--expanded'),
).toContain(
'padding: var(--flowchat-card-expanded-pad-y) var(--flowchat-card-expanded-pad-x);',
);
expect(
extractBlock(taskStyles, '.task-expanded-content .task-prompt-content'),
).toContain('padding: 0 var(--flowchat-card-pad-x) 0 0;');
).toContain('padding: 0;');
expect(taskStyles).toContain(
'.subagent-projection-container--expanded {\n' +
' padding:\n' +
' 8px\n' +
' calc(var(--flowchat-card-expanded-pad-x) + var(--flowchat-card-pad-x))\n' +
' 10px\n' +
' 0;',
' padding: var(--flowchat-card-expanded-pad-y) var(--flowchat-card-expanded-pad-x);',
);
});

it('does not pull expanded footer or list surfaces past the leading edge', () => {
it('lets full-bleed footer and list surfaces consume the shared body inset', () => {
const terminalStyles = readSource('../../tool-cards/TerminalToolCard.scss');
const gitStyles = readSource('../../tool-cards/GitToolDisplay.scss');
const miniAppStyles = readSource('../../tool-cards/MiniAppToolDisplay.scss');
const todoStyles = readSource('../../tool-cards/TodoWriteDisplay.scss');

expect(terminalStyles).toContain(
'.base-tool-card-wrapper.terminal-tool-card .terminal-result-footer {\n margin-left: 0;',
'.base-tool-card-wrapper.terminal-tool-card .terminal-result-footer {\n margin-left: calc(-1 * var(--flowchat-card-expanded-pad-x));',
);
expect(gitStyles).not.toMatch(/git-result-footer[\s\S]{0,120}margin-left:\s*-\d/);
expect(gitStyles).toMatch(/git-result-footer[\s\S]{0,120}margin-left:\s*-\d/);
expect(miniAppStyles).toContain(
'.base-tool-card-wrapper.miniapp-tool-display .miniapp-result-footer {\n margin-left: 0;',
'.base-tool-card-wrapper.miniapp-tool-display .miniapp-result-footer {\n margin-left: calc(-1 * var(--flowchat-card-expanded-pad-x));',
);
expect(extractBlock(todoStyles, '.todo-expanded-body')).toMatch(
/margin:\s*calc\(var\(--flowchat-card-expanded-pad-y\) \* -1\)\s*calc\(var\(--tool-card-expanded-pad-x\) \* -1\)\s*calc\(var\(--flowchat-card-expanded-pad-y\) \* -1\)\s*0;/,
/margin:\s*calc\(var\(--flowchat-card-expanded-pad-y\) \* -1\)\s*calc\(var\(--tool-card-expanded-pad-x\) \* -1\);/,
);
});
});
6 changes: 3 additions & 3 deletions src/web-ui/src/flow_chat/components/modern/SubagentItems.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,9 +27,9 @@

// Subagent container for items under the same parent task.
.subagent-items-container {
// Do not offset projected content past the task icon rail: expansion and
// collapse must keep the same leading edge.
padding: 10px 10px 10px 0;
// Keep projected output clear of every card edge while the outer container
// stays aligned with the task header.
padding: var(--flowchat-card-expanded-pad-y) var(--flowchat-card-expanded-pad-x);

// Continue the task card border on left/right/bottom; top border is hidden.
background: var(--color-bg-scene);
Expand Down
7 changes: 2 additions & 5 deletions src/web-ui/src/flow_chat/components/modern/VirtualMessageList.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,8 @@

/*
* FlowChat collapse contract: revealing a body may change height, never its
* leading edge. Owner styles also keep their offsets at zero; this selector
* is the surface-level guard for FlowChat's collapsible projection roots.
* It stays explicit so ordinary card-internal padding (for example question
* options) remains untouched.
* outer leading edge. Internal card padding belongs to each projection
* owner, so text keeps breathing room without shifting the card itself.
*/
.explore-region__content,
.thinking-content,
Expand All @@ -28,7 +26,6 @@
.subagent-items-container,
.subagent-projection-container--expanded {
margin-inline-start: 0;
padding-inline-start: 0;
}


Expand Down
2 changes: 1 addition & 1 deletion src/web-ui/src/flow_chat/components/subagent/SubagentProjectionView.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@

.subagent-projection-container--expanded {
max-height: min(48vh, 640px);
padding: 8px 0 10px;
padding: var(--flowchat-card-expanded-pad-y) var(--flowchat-card-expanded-pad-x);
}

.subagent-projection-container--collapsed {
Expand Down
6 changes: 3 additions & 3 deletions src/web-ui/src/flow_chat/tool-cards/BaseToolCard.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -218,12 +218,12 @@

/* ========== Expanded content area ========== */
.base-tool-card-expanded {
/* Full-bleed dividers in children use these (header pad-x is 0; do not conflate). */
/* Full-bleed dividers in children use these shared body insets. */
padding:
var(--flowchat-card-expanded-pad-y)
var(--tool-card-expanded-pad-x)
var(--flowchat-card-expanded-pad-y)
0;
var(--tool-card-expanded-pad-x);
background: transparent;
position: relative;
opacity: 1;
Expand All @@ -238,7 +238,7 @@
var(--flowchat-card-expanded-pad-y)
var(--flowchat-card-expanded-pad-x)
var(--flowchat-card-expanded-pad-y)
0;
var(--flowchat-card-expanded-pad-x);
margin-left: 0;
background: none !important;
border: none !important;
Expand Down
2 changes: 1 addition & 1 deletion src/web-ui/src/flow_chat/tool-cards/CompactToolCard.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -299,7 +299,7 @@
position: relative;
margin-top: 8px;
margin-left: 0;
padding: 12px 12px 12px 0;
padding: 12px;
background: var(--color-bg-primary);
border: 1px solid var(--border-base);
border-radius: 6px;
Expand Down
4 changes: 2 additions & 2 deletions src/web-ui/src/flow_chat/tool-cards/GitToolDisplay.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@
/* Footer bar: full width + background to bottom inner edge of expanded content (matches .compact-tool-card-expanded padding). */
.base-tool-card-wrapper.git-tool-display .git-result-footer,
.compact-tool-card-wrapper.git-tool-display .git-result-footer {
margin-left: 0;
margin-left: -8px;
margin-right: -8px;
margin-bottom: -8px;
padding: 0.375rem 0.5rem;
Expand All @@ -65,7 +65,7 @@

/* Expanded + same shell as Terminal: match `terminal-result-footer` inset from `TerminalToolCard.scss`. */
.base-tool-card-wrapper.terminal-tool-card.git-tool-display .git-result-footer {
margin-left: 0;
margin-left: -12px;
margin-right: -12px;
margin-bottom: -12px;
padding: 0.375rem var(--flowchat-card-pad-x);
Expand Down
2 changes: 1 addition & 1 deletion src/web-ui/src/flow_chat/tool-cards/MiniAppToolDisplay.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
}

.base-tool-card-wrapper.miniapp-tool-display .miniapp-result-footer {
margin-left: 0;
margin-left: calc(-1 * var(--flowchat-card-expanded-pad-x));
margin-right: calc(-1 * var(--flowchat-card-expanded-pad-x));
margin-bottom: calc(-1 * var(--flowchat-card-expanded-pad-y));
padding: var(--flowchat-card-expanded-pad-y) var(--flowchat-card-expanded-pad-x);
Expand Down
13 changes: 5 additions & 8 deletions src/web-ui/src/flow_chat/tool-cards/TaskToolDisplay.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -340,7 +340,7 @@
The generic thinking content has vertical padding; with a one-line max-height
that can leave only padding visible and push the prompt text out of view. */
.task-expanded-content .task-prompt-content {
padding: 0 var(--flowchat-card-pad-x) 0 0;
padding: 0;
max-height: 3.2em;
overflow-y: auto;
}
Expand Down Expand Up @@ -370,7 +370,7 @@
.task-interruption-divider {
height: 1px;
background: var(--border-base);
margin: -2px calc(-1 * var(--tool-card-expanded-pad-x)) 0 0;
margin: -2px calc(-1 * var(--tool-card-expanded-pad-x)) 0;
}

.task-expanded-content .task-prompt-markdown {
Expand Down Expand Up @@ -610,13 +610,10 @@
border-top: 1px solid var(--border-base);
}

// Keep projected subagent output on the task card's leading edge.
// Keep the subagent body aligned with the task card while preserving the
// same internal inset on every side.
.subagent-projection-container--expanded {
padding:
8px
calc(var(--flowchat-card-expanded-pad-x) + var(--flowchat-card-pad-x))
10px
0;
padding: var(--flowchat-card-expanded-pad-y) var(--flowchat-card-expanded-pad-x);
}

// Hide the header top accent line — the wrapper border already frames
Expand Down
2 changes: 1 addition & 1 deletion src/web-ui/src/flow_chat/tool-cards/TerminalToolCard.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@

/* Footer bar: full width + background to bottom inner edge of expanded content (matches .base-tool-card-expanded padding). */
.base-tool-card-wrapper.terminal-tool-card .terminal-result-footer {
margin-left: 0;
margin-left: calc(-1 * var(--flowchat-card-expanded-pad-x));
margin-right: calc(-1 * var(--flowchat-card-expanded-pad-x));
margin-bottom: calc(-1 * var(--flowchat-card-expanded-pad-y));
padding: var(--flowchat-inline-gap) var(--flowchat-card-expanded-pad-x);
Expand Down
6 changes: 1 addition & 5 deletions src/web-ui/src/flow_chat/tool-cards/TodoWriteDisplay.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -154,11 +154,7 @@

/* Expanded body — align list with card edges */
.todo-expanded-body {
margin:
calc(var(--flowchat-card-expanded-pad-y) * -1)
calc(var(--tool-card-expanded-pad-x) * -1)
calc(var(--flowchat-card-expanded-pad-y) * -1)
0;
margin: calc(var(--flowchat-card-expanded-pad-y) * -1) calc(var(--tool-card-expanded-pad-x) * -1);
}
.todo-full-list {
background: transparent;
Expand Down