From 2f19984f0c1cebd972255b98fb74e0b67b42056d Mon Sep 17 00:00:00 2001
From: syui <syui@syui.ai>
Date: Thu, 22 Jan 2026 18:02:17 +0900
Subject: [PATCH] fix chat layout

---
 src/web/components/chat.ts |  7 +++----
 src/web/styles/main.css    | 32 +++++++++++++++++++++++++++++---
 2 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/src/web/components/chat.ts b/src/web/components/chat.ts
index cddeac7..8157b72 100644
--- a/src/web/components/chat.ts
+++ b/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
-      ? displayContent.slice(0, 100) + '...'
-      : displayContent
+    const lines = displayContent.split('\n').slice(0, 3)
+    const preview = lines.join('\n')
 
     return `
       <a href="/@${userHandle}/at/chat/${rkey}" class="chat-thread-item">
diff --git a/src/web/styles/main.css b/src/web/styles/main.css
index 1811b00..e46943b 100644
--- a/src/web/styles/main.css
+++ b/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;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  white-space: pre-line;
 }