From da28a2f5c4ba7efddadd2dfe706c907d5d0aee49 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Tue, 10 Mar 2026 08:30:04 -0400
Subject: [PATCH] Fix queued bubble alignment and shape to match user messages

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>
---
 frontend/src/views/ChatView.vue      | 18 ++++++++++++------
 frontend/src/views/WorkspaceView.vue | 19 +++++++++++++------
 2 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/frontend/src/views/ChatView.vue b/frontend/src/views/ChatView.vue
index 3eb355c..95e9805 100644
--- a/frontend/src/views/ChatView.vue
+++ b/frontend/src/views/ChatView.vue
@@ -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;
diff --git a/frontend/src/views/WorkspaceView.vue b/frontend/src/views/WorkspaceView.vue
index 7d573d2..e806387 100644
--- a/frontend/src/views/WorkspaceView.vue
+++ b/frontend/src/views/WorkspaceView.vue
@@ -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;