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 {
background: var(--color-primary) !important;
color: #fff !important;
border-bottom-right-radius: 4px !important;
opacity: 0.45;
.chat-message.role-user {
justify-content: flex-end;
}
.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;
opacity: 0.45;
font-size: 0.95rem;
line-height: 1.55;
word-break: break-word;
}
.queued-badge {
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;
overflow-y: auto;
}
.queued-bubble {
background: var(--color-primary) !important;
color: #fff !important;
border-bottom-right-radius: 4px !important;
opacity: 0.45;
.ws-message.role-user {
display: flex;
justify-content: flex-end;
}
.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;
opacity: 0.45;
font-size: 0.95rem;
line-height: 1.55;
word-break: break-word;
}
.queued-badge {
font-size: 0.65rem;