diff --git a/packages/dashboard/app/components/TaskChatTab.css b/packages/dashboard/app/components/TaskChatTab.css index 15f5632942..69df5a020d 100644 --- a/packages/dashboard/app/components/TaskChatTab.css +++ b/packages/dashboard/app/components/TaskChatTab.css @@ -377,6 +377,9 @@ FN-6604 corrects the FN-6507 no-op where var(--space-lg) resolved to the same 16 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. + +FNXC:TaskDetailChat 2026-06-18-12:00: +FN-6660 corrects the repeated mobile sizing misses from FN-6507, FN-6604, and FN-6639: those passes only grew the glyph token inside a fixed 40px box, so the mobile affordance was never larger than desktop and still felt too small. Grow only the mobile box to calc(var(--space-2xl) + var(--space-lg)) and the mobile glyph to calc(var(--space-2xl) + var(--space-sm)), roughly 83% fill, while raising the mobile composer textarea min-height to the same 48px token sum for bottom alignment. Desktop stays intentionally unchanged. */ .task-chat-send { --btn-icon-size: var(--space-2xl); @@ -479,9 +482,15 @@ FN-6639 corrects the FN-6604 sizing because var(--space-xl) rendered a 24px glyp gap: var(--space-xs); } + .task-chat-input { + min-height: calc(var(--space-2xl) + var(--space-lg)); + } + .task-chat-send { - --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)); + --btn-icon-size: calc(var(--space-2xl) + var(--space-sm)); + inline-size: calc(var(--space-2xl) + var(--space-lg)); + min-inline-size: calc(var(--space-2xl) + var(--space-lg)); + block-size: calc(var(--space-2xl) + var(--space-lg)); + min-block-size: calc(var(--space-2xl) + var(--space-lg)); } } diff --git a/packages/dashboard/app/components/__tests__/TaskChatTab.test.tsx b/packages/dashboard/app/components/__tests__/TaskChatTab.test.tsx index 7f305c66c1..35e87a0c24 100644 --- a/packages/dashboard/app/components/__tests__/TaskChatTab.test.tsx +++ b/packages/dashboard/app/components/__tests__/TaskChatTab.test.tsx @@ -2072,24 +2072,32 @@ describe("TaskChatTab", () => { const sendRule = getCssRuleBlock(css, ".task-chat-send"); const mobileCss = getCssAfter(css, "@media (max-width: 768px)"); const mobileSendRule = getCssRuleBlock(mobileCss, ".task-chat-send"); + const mobileInputRule = getCssRuleBlock(mobileCss, ".task-chat-input"); const tokenValues = getRootTokenPxValues(sharedStyles); 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 mobileIconSizePx = resolveCssCalcSumPx(getCssDeclaration(mobileSendRule, "--btn-icon-size"), tokenValues); const desktopBoxSizePx = resolveCssCalcSumPx(getCssDeclaration(sendRule, "inline-size"), tokenValues); const mobileBoxSizePx = resolveCssCalcSumPx(getCssDeclaration(mobileSendRule, "inline-size"), tokenValues); + const mobileInputMinHeightPx = resolveCssCalcSumPx(getCssDeclaration(mobileInputRule, "min-height"), tokenValues); expect(defaultIconSizePx).toBe(16); expect(desktopIconSizePx).toBeGreaterThan(defaultIconSizePx); expect(mobileIconSizePx).toBeGreaterThan(defaultIconSizePx); + expect(mobileBoxSizePx).toBeGreaterThan(desktopBoxSizePx); + expect(mobileIconSizePx).toBeGreaterThan(desktopIconSizePx); expect(desktopIconSizePx / desktopBoxSizePx).toBeGreaterThanOrEqual(0.75); - expect(mobileIconSizePx / mobileBoxSizePx).toBeGreaterThanOrEqual(0.75); + expect(mobileIconSizePx / mobileBoxSizePx).toBeGreaterThanOrEqual(0.8); + expect(mobileInputMinHeightPx).toBe(mobileBoxSizePx); 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))"); expect(sendRule).toContain("min-block-size: calc(var(--space-2xl) + var(--space-sm))"); - expect(mobileSendRule).toContain("inline-size: calc(var(--space-2xl) + var(--space-sm))"); - expect(mobileSendRule).toContain("min-inline-size: calc(var(--space-2xl) + var(--space-sm))"); + expect(mobileSendRule).toContain("inline-size: calc(var(--space-2xl) + var(--space-lg))"); + expect(mobileSendRule).toContain("min-inline-size: calc(var(--space-2xl) + var(--space-lg))"); + expect(mobileSendRule).toContain("block-size: calc(var(--space-2xl) + var(--space-lg))"); + expect(mobileSendRule).toContain("min-block-size: calc(var(--space-2xl) + var(--space-lg))"); + expect(mobileInputRule).toContain("min-height: calc(var(--space-2xl) + var(--space-lg))"); }); it("keeps task chat timestamp styling tokenized and mobile-safe", () => { @@ -2132,8 +2140,8 @@ describe("TaskChatTab", () => { 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-2xl)"); - expect(mobileSendRule).toContain("inline-size: calc(var(--space-2xl) + var(--space-sm))"); + expect(mobileSendRule).toContain("--btn-icon-size: calc(var(--space-2xl) + var(--space-sm))"); + expect(mobileSendRule).toContain("inline-size: calc(var(--space-2xl) + var(--space-lg))"); expect(css).toContain(".task-chat-tool-group-summary"); expect(css).toContain(".task-chat-tool-group-names"); expect(css).toContain(".task-chat-tool-group-error-count");