From a34cab431ac524bb0b28a168ac1fdd088259352d Mon Sep 17 00:00:00 2001
From: Codex <codex@openai.com>
Date: Sun, 23 Aug 2026 20:09:56 +0800
Subject: [PATCH] Improve conversation preview layout

---
 web/static/css/style.css                      | 20 +++++++++++--------
 web/static/js/project-folder-preview.test.cjs | 16 +++++++++++++++
 2 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/web/static/css/style.css b/web/static/css/style.css
index c56d4667..e68a8c3a 100644
--- a/web/static/css/style.css
+++ b/web/static/css/style.css
@@ -858,7 +858,7 @@ html[data-theme="dark"] .vulnerability-alert-switch input:disabled + .vulnerabil
 }
 
 .conversation-sidebar {
-    width: 280px;
+    width: 320px;
     background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
     border-right: 1px solid var(--border-color);
     display: flex;
@@ -44995,7 +44995,7 @@ html[data-theme="dark"] .project-folder-preview-edit:focus-visible {
 .project-conversation-preview {
     position: fixed;
     z-index: 1200;
-    width: min(300px, calc(100vw - 32px));
+    width: min(340px, calc(100vw - 32px));
     padding: 12px 14px 11px;
     border: 1px solid rgba(30, 41, 59, 0.15);
     border-radius: 14px;
@@ -45011,11 +45011,12 @@ html[data-theme="dark"] .project-folder-preview-edit:focus-visible {
 }
 
 .project-conversation-preview-header {
-    display: grid;
-    grid-template-columns: minmax(0, 1fr) auto;
-    align-items: baseline;
-    gap: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 3px;
     margin-bottom: 8px;
+    min-width: 0;
 }
 
 .project-conversation-preview-title {
@@ -45025,8 +45026,11 @@ html[data-theme="dark"] .project-folder-preview-edit:focus-visible {
     font-size: 0.9rem;
     font-weight: 650;
     line-height: 1.35;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow-wrap: anywhere;
 }
 
 .project-conversation-preview-age {
diff --git a/web/static/js/project-folder-preview.test.cjs b/web/static/js/project-folder-preview.test.cjs
index e578f5bc..2e3c44f9 100644
--- a/web/static/js/project-folder-preview.test.cjs
+++ b/web/static/js/project-folder-preview.test.cjs
@@ -18,6 +18,12 @@ function functionSource(source, name, nextName) {
     return source.slice(start, end);
 }
 
+function cssBlock(source, selector) {
+    const match = source.match(new RegExp(`${selector.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}\\s*\\{[^}]*\\}`));
+    assert.ok(match, `${selector} style block should exist`);
+    return match[0];
+}
+
 test('无项目文件夹与普通项目共用悬浮和键盘聚焦预览', () => {
     const source = functionSource(projects, 'appendChatProjectFolderItem', 'appendChatProjectConversationItem');
 
@@ -122,3 +128,13 @@ test('对话悬浮预览显示本地年月日时分', () => {
     assert.match(zh, /"conversationPreviewDateTime": "\{\{year\}\}年\{\{month\}\}月\{\{day\}\}日 \{\{hour\}\}:\{\{minute\}\}"/);
     assert.match(en, /"conversationPreviewDateTime": "\{\{year\}\}-\{\{month\}\}-\{\{day\}\} \{\{hour\}\}:\{\{minute\}\}"/);
 });
+
+test('对话悬浮预览标题与时间分行显示并保留更多标题内容', () => {
+    const titleStyles = cssBlock(styles, '.project-conversation-preview-title');
+
+    assert.match(styles, /\.conversation-sidebar\s*\{[\s\S]*?width: 320px;/);
+    assert.match(styles, /\.project-conversation-preview\s*\{[\s\S]*?width: min\(340px, calc\(100vw - 32px\)\);/);
+    assert.match(styles, /\.project-conversation-preview-header\s*\{[\s\S]*?flex-direction: column;[\s\S]*?align-items: flex-start;/);
+    assert.match(titleStyles, /-webkit-line-clamp: 2;/);
+    assert.doesNotMatch(titleStyles, /white-space: nowrap;/);
+});