scriptoriumadmin/fabro
1
0
Fork 0
mirror of https://github.com/fabro-sh/fabro.git synced 2026-09-11 22:53:00 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

fix(web): tidy ask-fabro sidebar user bubbles and composer

Browse source 
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>
This commit is contained in:
Bryan Helmkamp 2026-05-21 08:52:54 -04:00
parent f2efaf70fb
commit d4ac007b07
No known key found for this signature in database
2 changed files with 8 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
apps/fabro-web/app/app.css
View file

@ -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. */

2
apps/fabro-web/app/components/chats/sidebar-composer.tsx
View file

@ -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