fix: update chat bubble components to use w-fit for improved layout responsiveness

Author: benjinus

packages/webapp/src/components/chat/MessageBubble.tsx

@@ -47,7 +47,7 @@ function isProbableImageUrl(value: string): boolean {
 
 function alignedCard(align: "left" | "right", content: import("react").ReactNode) {
   return (
-    <div className="max-w-[88%]">{content}</div>
+    <div className="w-fit">{content}</div>
   )
 }
 
@@ -186,7 +186,7 @@ export function MessageBubble({ message, align, onRetry }: MessageBubbleProps) {
   return (
     <ContextMenu>
       <ContextMenuTrigger asChild>
-        <div>
+        <div className="w-fit">
           {renderedContent}
           {deliveryState(align, message, onRetry)}
         </div>

packages/webapp/src/components/chat/MessageList.tsx

@@ -3,6 +3,7 @@ import { useTranslation } from "react-i18next"
 import { useVirtualizer } from "@tanstack/react-virtual"
 
 import { useMessageSender } from "@/hooks/use-message-sender"
+import { decodeUtf8Hex } from "@/lib/message-content"
 import { DidAvatar } from "@/components/shared/DidAvatar"
 import { useIdentityStore } from "@/stores/identity"
 import { useContactStore } from "@/stores/contact"
@@ -153,8 +154,8 @@ export function MessageList({ messages }: MessageListProps) {
             )
           }
 
-          const senderHint = row.value.sealedHeader
-          const isSelf = selfDid ? senderHint.includes(selfDid.slice(-8)) : false
+          const senderDid = decodeUtf8Hex(row.value.sealedHeader)
+          const isSelf = !!(selfDid && senderDid && senderDid === selfDid)
           const avatarDid = isSelf
             ? (selfDid ?? "did:claw:me")
             : (peerDid ?? "did:claw:unknown")
@@ -172,15 +173,20 @@ export function MessageList({ messages }: MessageListProps) {
               data-index={virtualItem.index}
               ref={rowVirtualizer.measureElement}
             >
-              <div className={`flex items-end gap-2 py-[3px] ${isSelf ? "flex-row-reverse justify-end" : "flex-row justify-start"}`}>
-                <DidAvatar did={avatarDid} avatarUrl={avatarUrl} className="size-8 shrink-0 rounded-full" />
-                <div className="min-w-0" style={{ maxWidth: "min(720px, 80%)" }}>
+              <div className={`flex items-end gap-2 py-[3px] ${isSelf ? "justify-end" : "justify-start"}`}>
+                {!isSelf && (
+                  <DidAvatar did={avatarDid} avatarUrl={avatarUrl} className="size-8 shrink-0 rounded-full" />
+                )}
+                <div style={{ maxWidth: "min(720px, 80%)" }}>
                   <MemoMessageBubble
                     message={row.value}
                     align={isSelf ? "right" : "left"}
                     onRetry={handleRetry}
                   />
                 </div>
+                {isSelf && (
+                  <DidAvatar did={avatarDid} avatarUrl={avatarUrl} className="size-8 shrink-0 rounded-full" />
+                )}
               </div>
             </div>
           )

packages/webapp/src/components/chat/bubbles/FileBubble.tsx

@@ -24,7 +24,7 @@ export function FileBubble({
   return (
     <div
       className={cn(
-        "inline-block rounded-2xl px-3.5 py-2 shadow-sm",
+        "w-fit rounded-2xl px-3.5 py-2 shadow-sm",
         align === "right"
           ? "rounded-br-md bg-[color:var(--chat-bubble-self)] text-[color:var(--chat-bubble-self-fg)]"
           : "rounded-bl-md bg-[color:var(--chat-bubble-peer)] text-[color:var(--chat-bubble-peer-fg)]",

packages/webapp/src/components/chat/bubbles/ImageBubble.tsx

@@ -56,7 +56,7 @@ export function ImageBubble({
     <div
       ref={containerRef}
       className={cn(
-        "inline-block overflow-hidden rounded-2xl shadow-sm",
+        "w-fit overflow-hidden rounded-2xl shadow-sm",
         align === "right"
           ? "rounded-br-md bg-[color:var(--chat-bubble-self)]"
           : "rounded-bl-md bg-[color:var(--chat-bubble-peer)]",

packages/webapp/src/components/chat/bubbles/TextBubble.tsx

@@ -14,7 +14,7 @@ export function TextBubble({ align, text, timestamp, provisional, attachmentMani
   return (
     <div
       className={cn(
-        "inline-block rounded-2xl px-3.5 py-2 text-[16px] leading-[22px] shadow-sm",
+        "w-fit rounded-2xl px-3.5 py-2 text-[16px] leading-[22px] shadow-sm",
         self
           ? "rounded-br-md bg-[color:var(--chat-bubble-self)] text-[color:var(--chat-bubble-self-fg)]"
           : "rounded-bl-md bg-[color:var(--chat-bubble-peer)] text-[color:var(--chat-bubble-peer-fg)]",