fix: chat UI

components/chat/message-list.tsx

@@ -44,7 +44,7 @@ function dayLabel(iso: string): string {
 export function MessageList({
   messages,
   selfId,
-  peer,
+  senderFor,
   receipts,
   isGroup,
   hasMore,
@@ -59,7 +59,8 @@ export function MessageList({
   /** Ascending by seq — oldest first. */
   messages: ChatMessage[];
   selfId: string;
-  peer?: ChatPeer | null;
+  /** Resolves a message's sender for their avatar and name. */
+  senderFor: (senderId: string | null | undefined) => ChatPeer | undefined;
   receipts: Receipts | null;
   isGroup: boolean;
   hasMore: boolean;
@@ -133,7 +134,10 @@ export function MessageList({
     <div
       ref={scrollRef}
       onScroll={onScroll}
-      className="flex-1 overflow-y-auto overscroll-contain px-4 py-4"
+      // overflow-x-hidden is load-bearing: `overflow-y: auto` computes the
+      // other axis to `auto` rather than `visible`, so the swipe-to-reply
+      // transform would otherwise give the thread a horizontal scrollbar.
+      className="flex-1 overflow-x-hidden overflow-y-auto overscroll-contain px-4 py-4"
     >
       {loadingMore && (
         <p className="pb-3 text-center text-xs text-muted-foreground">
@@ -160,7 +164,7 @@ export function MessageList({
               key={row.key}
               messages={row.messages}
               mine={row.senderId === selfId}
-              peer={peer}
+              sender={senderFor(row.senderId)}
               receipts={receipts}
               showAvatar={isGroup}
               selfId={selfId}