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

feat(FN-4050): fix mobile session title clipping in ChatView

Browse Source 
Fixes mobile session title clipping in ChatView via CSS updates, adds a test for the fix, and updates the mobile switcher docs for FN-4050.

Fusion-Task-Id: FN-4050
This commit is contained in:
Fusion
2026-05-11 18:27:48 -07:00
committed by gsxdsm
parent 4d4c44bfa5
commit a22a665ec3
3 changed files with 31 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -386,6 +386,7 @@
.chat-mobile-session-trigger {
width: 100%;
max-width: 100%;
min-width: 0;
display: inline-flex;
align-items: center;
justify-content: flex-start;
@@ -398,13 +399,27 @@
min-height: calc(var(--space-lg) * 2);
}
.chat-mobile-session-trigger .chat-thread-header-title,
.chat-mobile-session-trigger .chat-model-tag {
.chat-mobile-session-trigger .chat-thread-header-title {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.chat-mobile-session-trigger .chat-model-tag {
flex-shrink: 0;
max-width: calc(var(--space-xl) * 4);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.chat-mobile-session-trigger .provider-icon,
.chat-mobile-session-trigger > svg:first-child {
flex-shrink: 0;
}
.chat-mobile-session-trigger svg:last-child {
margin-left: auto;
color: var(--text-muted);
@@ -441,8 +456,8 @@
.chat-mobile-session-option {
width: 100%;
display: flex;
align-items: center;
min-height: calc(var(--space-lg) * 2);
align-items: flex-start;
min-height: calc(var(--space-lg) * 2.25);
border: none;
border-radius: var(--radius-sm);
background: transparent;
@@ -467,9 +482,8 @@
.chat-mobile-session-option-title {
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
overflow-wrap: anywhere;
}
.chat-thread-header-new-chat {

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

@@ -2490,11 +2490,20 @@ describe("ChatView CSS — mobile thread switcher", () => {
it("includes mobile session switcher trigger and dropdown tokenized contracts", () => {
const triggerMatch = css.match(/\.chat-mobile-session-trigger\s*\{([^}]*)\}/);
const dropdownMatch = css.match(/\.chat-mobile-session-dropdown\s*\{([^}]*)\}/);
const optionMatch = css.match(/\.chat-mobile-session-option\s*\{([^}]*)\}/);
const optionTitleMatch = css.match(/\.chat-mobile-session-option-title\s*\{([^}]*)\}/);
expect(triggerMatch).toBeTruthy();
expect(dropdownMatch).toBeTruthy();
expect(optionMatch).toBeTruthy();
expect(optionTitleMatch).toBeTruthy();
expect(triggerMatch?.[1]).toContain("min-height: calc(var(--space-lg) * 2)");
expect(triggerMatch?.[1]).toContain("min-width: 0");
expect(dropdownMatch?.[1]).toContain("background: var(--surface)");
expect(dropdownMatch?.[1]).toContain("border: 1px solid var(--border)");
expect(optionMatch?.[1]).toContain("min-height: calc(var(--space-lg) * 2.25)");
expect(optionMatch?.[1]).toContain("align-items: flex-start");
expect(optionTitleMatch?.[1]).toContain("white-space: normal");
expect(optionTitleMatch?.[1]).toContain("overflow-wrap: anywhere");
});
it("keeps mobile override for header identity overflow visible so dropdown can render", () => {