fix(collab): a quoted message wraps to two lines instead of pushing its bubble out of the chat

The quote inside a reply sat on one line with an ellipsis, and that unbroken
line set the bubble's minimum width, so a long quote pushed the bubble past
the edge of the chat and cut its words off. It wraps now and is cut after two
lines, on desktop and on the phone.

client/src/components/Collab/CollabChatBubble.tsx

@@ -140,7 +140,17 @@ export function ChatBubble({
           >
             {reply.name}
           </div>
-          <div style={{ opacity: 0.8, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+          {/* Wrapped and cut after two lines: a quote kept on one line set the bubble's width and pushed it out of the chat. */}
+          <div
+            style={{
+              opacity: 0.8,
+              overflow: 'hidden',
+              whiteSpace: 'normal',
+              display: '-webkit-box',
+              WebkitLineClamp: 2,
+              WebkitBoxOrient: 'vertical',
+            }}
+          >
             {reply.text}
           </div>
         </div>

client/src/components/Collab/CollabParts.test.tsx

@@ -26,6 +26,8 @@ describe('the Collab pieces', () => {
     expect(quoted.parentElement?.getAttribute('style')).toContain('background: var(--bg-card)');
     expect(screen.getByText('Anna')).toBeInTheDocument();
     expect(screen.getByText('Train?')).toBeInTheDocument();
+    // A long quote wraps instead of setting the bubble's width (it pushed the bubble out of the chat).
+    expect(screen.getByText('Train?').getAttribute('style')).toContain('white-space: normal');
   });
 
   it('FE-COLLAB-PARTS-002: a face is the picture, else the first letter; day, reactions and time draw their children', () => {

client/src/mobile/screens/trip/tabs/MCollabChat.tsx

@@ -331,7 +331,7 @@ function ChatBubbleRow({ msg, own, showHeader, isLastInGroup, marginTop, is12h,
               {hasReply && (
                 <div className="mb-1 rounded-[10px] bg-[color:var(--m-card)] px-[10px] py-[5px]">
                   <div className="font-geist text-[0.625rem] font-bold opacity-70">{msg.reply_username}</div>
-                  <div className="truncate text-[0.71875rem] opacity-80">{msg.reply_text?.slice(0, 80)}</div>
+                  <div className="line-clamp-2 text-[0.71875rem] opacity-80">{msg.reply_text?.slice(0, 80)}</div>
                 </div>
               )}
               <span className="whitespace-pre-wrap break-words">{msg.text}</span>