root/fusion
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

FN-6639: enlarge task chat send icon

Browse Source 
Increase the task detail chat send glyph so it fills the mobile button more clearly.

- Raise the task chat send button icon token from 24px to 32px on desktop and mobile.
- Add regression coverage that checks the icon-to-button fill ratio stays at least 75%.

Files changed:
 packages/dashboard/app/components/TaskChatTab.css       |  7 +++++--
 .../app/components/__tests__/TaskChatTab.test.tsx       | 17 +++++++++++++++--
 2 files changed, 20 insertions(+), 4 deletions(-)

Fusion-Task-Id: FN-6639
Fusion-Task-Lineage: fcd83c46-b408-4561-82e1-631e329459b8
This commit is contained in:
gsxdsm
2026-06-18 07:00:54 -07:00
parent 301ae7f0d3
commit d6415bfc41
2 changed files with 20 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
packages/dashboard/app/components/TaskChatTab.css
View File

@@ -374,9 +374,12 @@ FN-6507 requires the Task Detail chat send glyph to scale with the larger square
FNXC:TaskDetailChat 2026-06-17-18:05:
FN-6604 corrects the FN-6507 no-op where var(--space-lg) resolved to the same 16px value as the global --icon-size-md default. Use var(--space-xl) so the glyph resolves to 24px and fills the 40px desktop and mobile send button proportionally while preserving the tap box.
FNXC:TaskDetailChat 2026-06-18-06:36:
FN-6639 corrects the FN-6604 sizing because var(--space-xl) rendered a 24px glyph that filled only about 60% of the 40px button and still looked too small on mobile. Use var(--space-2xl) so Send and Loader2 render at 32px, about 80% fill, on desktop and mobile while preserving the tap box alignment.
*/
.task-chat-send {
--btn-icon-size: var(--space-xl);
--btn-icon-size: var(--space-2xl);
flex: 0 0 auto;
display: inline-flex;
align-items: center;
@@ -477,7 +480,7 @@ FN-6604 corrects the FN-6507 no-op where var(--space-lg) resolved to the same 16
}
.task-chat-send {
--btn-icon-size: var(--space-xl);
--btn-icon-size: var(--space-2xl);
inline-size: calc(var(--space-2xl) + var(--space-sm));
min-inline-size: calc(var(--space-2xl) + var(--space-sm));
}

17
packages/dashboard/app/components/__tests__/TaskChatTab.test.tsx
View File

@@ -119,6 +119,15 @@ function resolveCssPxToken(value: string, tokenValues: Record<string, number>):
return tokenValues[tokenName];
}
function resolveCssCalcSumPx(value: string, tokenValues: Record<string, number>): number {
const calcBody = /^calc\((var\(--[\w-]+\)(?:\s*\+\s*var\(--[\w-]+\))+)\)$/.exec(value.trim())?.[1];
const tokenNames = [...(calcBody?.matchAll(/var\((--[\w-]+)\)/g) ?? [])].map((match) => match[1]);
if (tokenNames.length === 0 || tokenNames.some((tokenName) => tokenValues[tokenName] === undefined)) {
throw new Error(`Unable to resolve CSS calc sum: ${value}`);
}
return tokenNames.reduce((sum, tokenName) => sum + tokenValues[tokenName], 0);
}
function mockLogs(
entries: AgentLogEntry[] = [],
loading = false,
@@ -2067,10 +2076,14 @@ describe("TaskChatTab", () => {
const defaultIconSizePx = tokenValues["--icon-size-md"];
const desktopIconSizePx = resolveCssPxToken(getCssDeclaration(sendRule, "--btn-icon-size"), tokenValues);
const mobileIconSizePx = resolveCssPxToken(getCssDeclaration(mobileSendRule, "--btn-icon-size"), tokenValues);
const desktopBoxSizePx = resolveCssCalcSumPx(getCssDeclaration(sendRule, "inline-size"), tokenValues);
const mobileBoxSizePx = resolveCssCalcSumPx(getCssDeclaration(mobileSendRule, "inline-size"), tokenValues);
expect(defaultIconSizePx).toBe(16);
expect(desktopIconSizePx).toBeGreaterThan(defaultIconSizePx);
expect(mobileIconSizePx).toBeGreaterThan(defaultIconSizePx);
expect(desktopIconSizePx / desktopBoxSizePx).toBeGreaterThanOrEqual(0.75);
expect(mobileIconSizePx / mobileBoxSizePx).toBeGreaterThanOrEqual(0.75);
expect(sendRule).toContain("inline-size: calc(var(--space-2xl) + var(--space-sm))");
expect(sendRule).toContain("min-inline-size: calc(var(--space-2xl) + var(--space-sm))");
expect(sendRule).toContain("block-size: calc(var(--space-2xl) + var(--space-sm))");
@@ -2112,14 +2125,14 @@ describe("TaskChatTab", () => {
expect(css).toContain(".task-chat-transcript");
expect(css).toContain(".task-chat-jump-to-bottom");
expect(css).toContain(".task-chat-composer-row");
expect(sendRule).toContain("--btn-icon-size: var(--space-xl)");
expect(sendRule).toContain("--btn-icon-size: var(--space-2xl)");
expect(sendRule).toContain("inline-size: calc(var(--space-2xl) + var(--space-sm))");
expect(sendRule).toContain("block-size: calc(var(--space-2xl) + var(--space-sm))");
expect(sendRule).not.toContain("gap");
expect(mobileComposerRule).toContain("align-items: flex-end");
expect(mobileComposerRule).not.toContain("flex-direction: column");
expect(mobileComposerRule).not.toContain("align-items: stretch");
expect(mobileSendRule).toContain("--btn-icon-size: var(--space-xl)");
expect(mobileSendRule).toContain("--btn-icon-size: var(--space-2xl)");
expect(mobileSendRule).toContain("inline-size: calc(var(--space-2xl) + var(--space-sm))");
expect(css).toContain(".task-chat-tool-group-summary");
expect(css).toContain(".task-chat-tool-group-names");