From d4ac007b07236ef931d3d94c8563c04bf60592c1 Mon Sep 17 00:00:00 2001
From: Bryan Helmkamp <bryan@brynary.com>
Date: Thu, 21 May 2026 08:52:54 -0400
Subject: [PATCH] fix(web): tidy ask-fabro sidebar user bubbles and composer
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

User message bubbles used the muted token (panel-alt), which composites
almost identically to the translucent bg-panel/40 sidebar — bubbles
visually disappeared into the column. Give them a solid panel surface so
they read as raised cards.

Also drop the composer's horizontal margin so the pill spans the full
sidebar width.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 apps/fabro-web/app/app.css                               | 7 +++++++
 apps/fabro-web/app/components/chats/sidebar-composer.tsx | 2 +-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/apps/fabro-web/app/app.css b/apps/fabro-web/app/app.css
index 451408606..eee37eb3e 100644
--- a/apps/fabro-web/app/app.css
+++ b/apps/fabro-web/app/app.css
@@ -227,6 +227,13 @@
     min-width: 0;
     overflow-x: hidden;
   }
+  /* Give user message bubbles a lighter, solid surface so they read as raised
+   * cards. The default muted bubble color (panel-alt) is nearly identical to
+   * the translucent `bg-panel/40` sidebar once composited over the page, so
+   * bubbles visually disappeared into the column. */
+  .ask-fabro-sidebar .aui-user-message-content {
+    background-color: var(--color-panel);
+  }
   /* Inset the assistant message content from the column's right edge so the
    * code block (dark pre box) has visible right margin and doesn't appear to
    * bleed against the sidebar edge when its content overflows. */
diff --git a/apps/fabro-web/app/components/chats/sidebar-composer.tsx b/apps/fabro-web/app/components/chats/sidebar-composer.tsx
index ff345ad72..fbb2338ab 100644
--- a/apps/fabro-web/app/components/chats/sidebar-composer.tsx
+++ b/apps/fabro-web/app/components/chats/sidebar-composer.tsx
@@ -9,7 +9,7 @@ import { StopIcon } from "@heroicons/react/24/outline";
  */
 export default function SidebarComposer() {
   return (
-    <ComposerPrimitive.Root className="m-3 flex w-auto items-end gap-2 rounded-2xl bg-panel-alt/80 px-3 py-2 shadow-md shadow-black/30 ring-1 ring-line-strong backdrop-blur-sm focus-within:ring-teal-500/40">
+    <ComposerPrimitive.Root className="my-3 flex w-auto items-end gap-2 rounded-2xl bg-panel-alt/80 px-3 py-2 shadow-md shadow-black/30 ring-1 ring-line-strong backdrop-blur-sm focus-within:ring-teal-500/40">
       <ComposerPrimitive.Input
         rows={1}
         autoFocus