From d6415bfc411cdd3cddfe6d9deeb073570dd73d6b Mon Sep 17 00:00:00 2001 From: gsxdsm Date: Thu, 18 Jun 2026 07:00:54 -0700 Subject: [PATCH] FN-6639: enlarge task chat send icon 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 --- .../dashboard/app/components/TaskChatTab.css | 7 +++++-- .../components/__tests__/TaskChatTab.test.tsx | 17 +++++++++++++++-- 2 files changed, 20 insertions(+), 4 deletions(-) diff --git a/packages/dashboard/app/components/TaskChatTab.css b/packages/dashboard/app/components/TaskChatTab.css index dfb29acefc..15f5632942 100644 --- a/packages/dashboard/app/components/TaskChatTab.css +++ b/packages/dashboard/app/components/TaskChatTab.css @@ -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)); } diff --git a/packages/dashboard/app/components/__tests__/TaskChatTab.test.tsx b/packages/dashboard/app/components/__tests__/TaskChatTab.test.tsx index c1e43bc2c8..7f305c66c1 100644 --- a/packages/dashboard/app/components/__tests__/TaskChatTab.test.tsx +++ b/packages/dashboard/app/components/__tests__/TaskChatTab.test.tsx @@ -119,6 +119,15 @@ function resolveCssPxToken(value: string, tokenValues: Record): return tokenValues[tokenName]; } +function resolveCssCalcSumPx(value: string, tokenValues: Record): 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");