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

FN-6660: enlarge mobile task chat send control

Browse Source 
Increase the task detail chat mobile composer affordance so the send icon and input align at a larger touch-friendly size.

- Grow the mobile-only task chat send button box and icon while leaving desktop sizing unchanged.
- Match the mobile composer textarea minimum height to the enlarged send control for bottom alignment.
- Extend CSS-focused regression coverage for mobile box/icon ratios and composer alignment.

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

Fusion-Task-Id: FN-6660

Fusion-Task-Lineage: 3b9bc41a-9f7e-47a5-8286-03c0dbf94d0e
This commit is contained in:
gsxdsm
2026-06-18 15:04:25 -07:00
parent e14f33568c
commit 6d3ee547de
2 changed files with 26 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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));
}
}

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

@@ -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");