From 956073fd2edae0973ff13b375b7ff939056f5e5f Mon Sep 17 00:00:00 2001 From: dolphin Date: Tue, 4 Aug 2026 21:31:04 +0800 Subject: [PATCH] fix(chat): align the message column with the input box The input sat a few pixels right of the messages above it. `scrollbar-on-scroll` reserves the scrollbar gutter with `scrollbar-gutter: stable`, which puts the whole 8px on the end edge, so the scroller's content box is asymmetric and the centered message column lands half a scrollbar to the left. The input is centered in the full width, outside that scroller, so the two never matched. Reserving the gutter on both edges makes the box symmetric again and the two columns share a centre. Applied inline rather than as a utility class: `.scrollbar-on-scroll` is plain CSS declared after `@tailwind utilities`, so at equal specificity it wins on source order and the class form had no effect. --- .../client/src/components/Chat/AiChatMessages.tsx | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/frontend/client/src/components/Chat/AiChatMessages.tsx b/src/frontend/client/src/components/Chat/AiChatMessages.tsx index 6701aefa7..49daa98f0 100644 --- a/src/frontend/client/src/components/Chat/AiChatMessages.tsx +++ b/src/frontend/client/src/components/Chat/AiChatMessages.tsx @@ -371,6 +371,16 @@ export default function AiChatMessages({ scrollRef.current = el; messagesScrollRevealRef(el); }} + // `scrollbar-on-scroll` reserves the scrollbar gutter with + // `scrollbar-gutter: stable`, i.e. entirely on the end edge. That + // makes this box asymmetric, so the centered message column sits + // half a scrollbar left of the input below it — the input is + // centered in the full width, outside this scroller. Reserving on + // both edges restores a symmetric box and the two columns line up. + // Set inline, not as a utility class: `.scrollbar-on-scroll` is + // plain CSS declared after `@tailwind utilities`, so at equal + // specificity it would win on source order. + style={{ scrollbarGutter: "stable both-edges" }} className={cn( "min-h-0 flex-1 overflow-y-auto scrollbar-on-scroll", hideHeaderTitle