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

FN-6507: enlarge task chat send icon

Browse Source 
Keep the Task Detail chat send glyph proportional to its touch target on desktop and mobile.

- Set the task chat send button icon sizing token to the larger spacing value.
- Preserve the existing desktop and mobile touch-target dimensions.
- Add CSS regression coverage for the send glyph and mobile sizing rules.

Files changed:
 packages/dashboard/app/components/TaskChatTab.css       |  6 ++++++
 .../app/components/__tests__/TaskChatTab.test.tsx       | 17 +++++++++++++++++
 2 files changed, 23 insertions(+)

Fusion-Task-Id: FN-6507

Fusion-Task-Lineage: 619aef93-d225-443c-9cf2-41a59d794148
This commit is contained in:
gsxdsm
2026-06-16 20:00:55 -07:00
parent 98cb80d88d
commit 2ec4eb3518
2 changed files with 23 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -335,7 +335,12 @@ FN-6425 requires the chat expand control to stay inside the chat view as an icon
flex: 1 1 auto;
}
/*
FNXC:TaskDetailChat 2026-06-16-19:45:
FN-6507 requires the Task Detail chat send glyph to scale with the larger square touch target on desktop and mobile. Override only this button's global .btn-icon size so Send and Loader2 stay visually proportional without changing the tap box or sibling chat send buttons.
*/
.task-chat-send {
--btn-icon-size: var(--space-lg);
flex: 0 0 auto;
display: inline-flex;
align-items: center;
@@ -422,6 +427,7 @@ FN-6425 requires the chat expand control to stay inside the chat view as an icon
}
.task-chat-send {
--btn-icon-size: var(--space-lg);
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

@@ -1686,6 +1686,23 @@ describe("TaskChatTab", () => {
expect(mobileJumpRule).toContain("min-block-size");
});
it("scales the task chat send glyph without shrinking the desktop or mobile touch target", () => {
const css = readFileSync(resolve(__dirname, "../TaskChatTab.css"), "utf8");
const sendRule = getCssRuleBlock(css, ".task-chat-send");
const mobileCss = getCssAfter(css, "@media (max-width: 768px)");
const mobileSendRule = getCssRuleBlock(mobileCss, ".task-chat-send");
expect(sendRule).toContain("--btn-icon-size: var(--space-lg)");
expect(sendRule).not.toContain("--btn-icon-size: var(--icon-size-md)");
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("--btn-icon-size: var(--space-lg)");
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))");
});
it("keeps mobile breakpoint scaffolding for the transcript, composer, and collapsible groups", () => {
const css = readFileSync(resolve(__dirname, "../TaskChatTab.css"), "utf8");
const sendRule = getCssRuleBlock(css, ".task-chat-send");