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

feat(FN-3911): reserve chat session text space for delete button

Browse Source 
Fixes a layout issue where chat session rows did not reserve space for the delete button, which could cause text to be obscured when the button appeared. Added a CSS rule to maintain consistent spacing and a test to assert the reservation behavior.

Fusion-Task-Id: FN-3911
This commit is contained in:
Fusion
2026-05-09 23:26:08 -07:00
committed by gsxdsm
parent 6cab8f985e
commit b6d5032b31
2 changed files with 26 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
packages/dashboard/app/components/ChatView.css
View File

@@ -248,6 +248,7 @@
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
padding-right: calc(var(--space-md) * 3);
} }
.chat-session-preview { .chat-session-preview {
@@ -256,6 +257,7 @@
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
padding-right: calc(var(--space-md) * 3);
} }
.chat-session-meta { .chat-session-meta {
@@ -1348,6 +1350,11 @@
min-height: calc(var(--space-lg) * 2.25); min-height: calc(var(--space-lg) * 2.25);
} }
.chat-session-title,
.chat-session-preview {
padding-right: calc((var(--space-lg) * 2.25) + var(--space-sm));
}
.chat-message--assistant .chat-message-render-toggle { .chat-message--assistant .chat-message-render-toggle {
opacity: 1; opacity: 1;
} }

19
packages/dashboard/app/components/__tests__/ChatView.test.tsx
View File

@@ -2238,6 +2238,25 @@ describe("Chat Session Delete Button", () => {
}); });
}); });
describe("FN-3911 chat session list layout", () => {
const css = loadAllAppCss();
it("reserves right padding on title and preview rows so text clears the delete button", () => {
const titleMatch = css.match(/\.chat-session-title\s*\{([^}]*)\}/);
const previewMatch = css.match(/\.chat-session-preview\s*\{([^}]*)\}/);
expect(titleMatch).toBeTruthy();
expect(previewMatch).toBeTruthy();
expect(titleMatch?.[1]).toMatch(/padding-right:\s*calc\(var\(--space-md\)\s*\*\s*3\)/);
expect(previewMatch?.[1]).toMatch(/padding-right:\s*calc\(var\(--space-md\)\s*\*\s*3\)/);
});
it("applies a mobile padding override that still clears the larger delete button", () => {
expect(css).toMatch(
/@media\s*\(max-width:\s*768px\)[\s\S]*?\.chat-session-title,\s*\.chat-session-preview\s*\{\s*padding-right:\s*calc\(\(var\(--space-lg\)\s*\*\s*2\.25\)\s*\+\s*var\(--space-sm\)\);\s*\}/,
);
});
});
describe("Chat Session Delete Button CSS", () => { describe("Chat Session Delete Button CSS", () => {
const css = loadAllAppCss(); const css = loadAllAppCss();