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

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 52f62f1494
commit 3a45a3fc25
3 changed files with 31 additions and 8 deletions

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 {