bvandeusen/FabledScribe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 50 Wiki Activity

Fix queued bubble alignment and shape to match user messages

Browse Source 
The role-user justify-content and message-bubble shape styles are scoped
to ChatMessage.vue and don't reach the inline queued bubbles. Add them
directly in ChatView and WorkspaceView: right-aligned row, 16px border
radius with 4px bottom-right corner, same padding and font as user bubbles.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Bryan Van Deusen
2026-03-10 08:30:04 -04:00
parent a90342c9cb
commit da28a2f5c4
2 changed files with 25 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/ChatView.vue
+12 -6
View File
@@ -1622,14 +1622,20 @@ details[open] .thinking-summary::before {
} }
} }
.queued-bubble { .chat-message.role-user {
background: var(--color-primary) !important; justify-content: flex-end;
color: #fff !important;
border-bottom-right-radius: 4px !important;
opacity: 0.45;
} }
.queued-bubble .message-content { .queued-bubble {
max-width: 80%;
padding: 0.75rem 1rem;
border-radius: 16px;
border-bottom-right-radius: 4px;
background: var(--color-primary);
color: #fff; color: #fff;
opacity: 0.45;
font-size: 0.95rem;
line-height: 1.55;
word-break: break-word;
} }
.queued-badge { .queued-badge {
font-size: 0.65rem; font-size: 0.65rem;
frontend/src/views/WorkspaceView.vue
+13 -6
View File
@@ -643,14 +643,21 @@ details[open] .thinking-summary::before {
max-height: 300px; max-height: 300px;
overflow-y: auto; overflow-y: auto;
} }
.queued-bubble { .ws-message.role-user {
background: var(--color-primary) !important; display: flex;
color: #fff !important; justify-content: flex-end;
border-bottom-right-radius: 4px !important;
opacity: 0.45;
} }
.queued-bubble .message-content { .queued-bubble {
max-width: 80%;
padding: 0.75rem 1rem;
border-radius: 16px;
border-bottom-right-radius: 4px;
background: var(--color-primary);
color: #fff; color: #fff;
opacity: 0.45;
font-size: 0.95rem;
line-height: 1.55;
word-break: break-word;
} }
.queued-badge { .queued-badge {
font-size: 0.65rem; font-size: 0.65rem;