FN-6103: align chat stop button sizing with composer height

Align the regular chat stop button with the composer control sizing while quarantining an unrelated flaky room test.

- define a shared chat input control size variable and apply it to send/stop buttons for consistent width and minimum height
- update the chat input autosize CSS test to assert the shared control size contract and textarea minimum height
- quarantine the unrelated flaky ChatView rooms test in the dashboard Vitest config and quarantine ledger per policy

Files changed:
 packages/dashboard/app/components/ChatView.css       | 20 +++++++++++++-------
 .../__tests__/ChatView.chat-input-autosize.test.tsx  | 16 +++++++++++-----
 packages/dashboard/vitest.config.ts                  |  3 ++-
 scripts/lib/test-quarantine.json                     |  8 +++++++-
 4 files changed, 33 insertions(+), 14 deletions(-)

Fusion-Task-Id: FN-6103

Fusion-Task-Lineage: 3efc95ba-9369-4022-aa6e-f1981485caea
This commit is contained in:
gsxdsm
2026-06-09 11:07:44 -07:00
parent 7a2864f411
commit 21f7a47c29
4 changed files with 33 additions and 14 deletions

View File

@@ -1372,6 +1372,8 @@
}
.chat-input-row {
--chat-input-control-size: calc(var(--space-lg) * 2.5);
display: flex;
align-items: flex-end;
gap: var(--space-sm);
@@ -1480,8 +1482,8 @@
}
.chat-input-send {
width: 36px;
height: 36px;
width: var(--chat-input-control-size);
min-height: var(--chat-input-control-size);
border-radius: 50%;
border: none;
background: var(--accent);
@@ -1499,8 +1501,8 @@
}
.chat-input-stop {
width: 36px;
height: 36px;
width: var(--chat-input-control-size);
min-height: var(--chat-input-control-size);
border-radius: var(--radius-md);
border: none;
background: color-mix(in srgb, var(--color-error) 15%, transparent);
@@ -1869,13 +1871,17 @@
}
/* primary touch targets per AGENTS.md convention */
.chat-attach-btn,
.chat-input-send,
.chat-input-stop {
.chat-attach-btn {
min-width: calc(var(--space-lg) * 2.25);
min-height: calc(var(--space-lg) * 2.25);
}
.chat-input-send,
.chat-input-stop {
min-width: var(--chat-input-control-size);
min-height: var(--chat-input-control-size);
}
.chat-attachment-preview {
width: calc(var(--space-xl) * 2.5);
height: calc(var(--space-xl) * 2.5);

View File

@@ -15,16 +15,22 @@ describe("ChatView chat input autosize", () => {
expect(textareaRule?.[0]).toContain("overflow-y: hidden");
});
it("keeps the stop button dimensions aligned with the send button", () => {
it("keeps the stop button dimensions aligned with the send button and textarea minimum", () => {
const rowRule = chatViewCss.match(/\.chat-input-row\s*\{[^}]*\}/);
const textareaRule = chatViewCss.match(/\.chat-input-textarea\s*\{[^}]*\}/);
const sendRule = chatViewCss.match(/\.chat-input-send\s*\{[^}]*\}/);
const stopRule = chatViewCss.match(/\.chat-input-stop\s*\{[^}]*\}/);
expect(rowRule).not.toBeNull();
expect(textareaRule).not.toBeNull();
expect(sendRule).not.toBeNull();
expect(stopRule).not.toBeNull();
expect(sendRule?.[0]).toContain("width: 36px");
expect(sendRule?.[0]).toContain("height: 36px");
expect(stopRule?.[0]).toContain("width: 36px");
expect(stopRule?.[0]).toContain("height: 36px");
expect(rowRule?.[0]).toContain("--chat-input-control-size: calc(var(--space-lg) * 2.5)");
expect(textareaRule?.[0]).toContain("min-height: 40px");
expect(sendRule?.[0]).toContain("width: var(--chat-input-control-size)");
expect(sendRule?.[0]).toContain("min-height: var(--chat-input-control-size)");
expect(stopRule?.[0]).toContain("width: var(--chat-input-control-size)");
expect(stopRule?.[0]).toContain("min-height: var(--chat-input-control-size)");
});
it("clamps oversized textarea growth to the new max height", () => {

View File

@@ -231,7 +231,7 @@ const qualityAppComponentBatchBTests = buildComponentQualityInclude(batchedQuali
const qualityAppAppOnlyTests = ["app/components/__tests__/App.test.tsx"];
const qualityAppChatOnlyTests = ["app/components/__tests__/ChatView.test.tsx"];
const qualityAppSettingsOnlyTests = ["app/components/__tests__/SettingsModal.test.tsx"];
const quarantinedDashboardTests = ["app/components/__tests__/ChatView.rooms.test.tsx"];
const qualityApiTests = [
// Critical HTTP/server behavior: auth, task/project/settings mutation,
@@ -318,6 +318,7 @@ export default defineConfig({
minWorkers: 1,
fileParallelism: true,
isolate: true,
exclude: quarantinedDashboardTests,
// Dashboard route and integration-heavy suites can exceed the Vitest
// 5s default under workspace-concurrent runs.
testTimeout: 15_000,