fix: align chat messages with prompt input (#366)

Messages were horizontally offset from the prompt input due to the
scrollbar taking space on one side. Adding `scrollbar-gutter: stable
both-edges` reserves symmetric space for scrollbars, keeping content
centered and aligned with the prompt.

Author: hakonharnes

src/components/chat-bot.tsx

@@ -429,7 +429,9 @@ export default function ChatBot({ threadId, initialMessages }: Props) {
         ) : (
           <>
             <div
-              className={"flex flex-col gap-2 overflow-y-auto py-6 z-10"}
+              className={
+                "flex flex-col gap-2 overflow-y-auto py-6 z-10 [scrollbar-gutter:stable_both-edges]"
+              }
               ref={containerRef}
               onScroll={handleScroll}
             >