fix chat layout

src/web/components/chat.ts

@@ -136,11 +136,10 @@ export function renderChatThreadList(
       ? `<img class="chat-avatar" src="${author.avatarUrl}" alt="@${escapeHtml(author.handle)}">`
       : `<div class="chat-avatar-placeholder"></div>`
 
-    // Truncate content for preview (use translated content)
+    // Truncate content for preview (use translated content, show first 3 lines)
     const displayContent = getTranslatedContent(msg)
-    const preview = displayContent.length > 100
+    const lines = displayContent.split('\n').slice(0, 3)
-      ? displayContent.slice(0, 100) + '...'
+    const preview = lines.join('\n')
-      : displayContent
 
     return `
       <a href="/@${userHandle}/at/chat/${rkey}" class="chat-thread-item">

src/web/styles/main.css

@@ -2383,6 +2383,25 @@ button.tab {
   color: var(--btn-color);
 }
 
+.chat-content table {
+  display: block;
+  overflow-x: auto;
+  border-collapse: collapse;
+  margin: 8px 0;
+  font-size: 0.9rem;
+}
+
+.chat-content th,
+.chat-content td {
+  border: 1px solid #ddd;
+  padding: 6px 10px;
+  white-space: nowrap;
+}
+
+.chat-content th {
+  background: #f5f5f5;
+}
+
 /* Dark mode chat */
 @media (prefers-color-scheme: dark) {
   .chat-message {
@@ -2413,6 +2432,15 @@ button.tab {
     background: #333;
   }
 
+  .chat-content th,
+  .chat-content td {
+    border-color: #444;
+  }
+
+  .chat-content th {
+    background: #2a2a2a;
+  }
+
   .chat-avatar-placeholder {
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   }
@@ -2480,7 +2508,5 @@ button.tab {
   color: #666;
   font-size: 0.95rem;
   line-height: 1.4;
-  overflow: hidden;
+  white-space: pre-line;
-  text-overflow: ellipsis;
-  white-space: nowrap;
 }