diff --git a/packages/web/src/components/chat/message-scroller.tsx b/packages/web/src/components/chat/message-scroller.tsx index ec12658b..2277bb8f 100644 --- a/packages/web/src/components/chat/message-scroller.tsx +++ b/packages/web/src/components/chat/message-scroller.tsx @@ -34,7 +34,9 @@ function MessageScroller({ // The viewport fades out at its bottom while there is more below. A browser that can drive the // fade from the scroll position does (shadcn's scroll-fade); for one that can't, the viewport -// says whether it is scrolled to the end, and the stylesheet lifts the fade there. +// says whether it is scrolled to the end, and the stylesheet lifts the fade there. It takes focus +// so the arrow keys scroll it, but shows no outline for it: clicking into the conversation would +// otherwise frame the whole of it. function MessageScrollerViewport({ className, ...props @@ -45,7 +47,7 @@ function MessageScrollerViewport({ data-slot="message-scroller-viewport" data-scrollable-end={scrollable.end} className={cn( - 'size-full min-h-0 min-w-0 scroll-fade-b scrollbar-thin scrollbar-gutter-stable overflow-y-auto overscroll-contain contain-content data-autoscrolling:scrollbar-thumb-transparent data-autoscrolling:scrollbar-track-transparent data-pending-scroll:invisible', + 'size-full min-h-0 min-w-0 outline-none scroll-fade-b scrollbar-thin scrollbar-gutter-stable overflow-y-auto overscroll-contain contain-content data-autoscrolling:scrollbar-thumb-transparent data-autoscrolling:scrollbar-track-transparent data-pending-scroll:invisible', className, )} {...props}