From 5c3d5987d9947d15cd4fe4f6dfdc9ed7d88b8a23 Mon Sep 17 00:00:00 2001
From: eaiadmin <eaiadmin@lebiztrips.com>
Date: Mon, 14 Sep 2026 08:25:16 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E6=99=BA=E8=83=BD=E5=8A=A9=E6=89=8B?=
 =?UTF-8?q?=E6=9C=80=E4=BD=B3=E5=AE=9E=E8=B7=B5=E5=8D=A1=E7=89=87=E6=94=B6?=
 =?UTF-8?q?=E7=AA=84=EF=BC=8C=E5=9B=BA=E5=AE=9A=E4=B8=80=E8=A1=8C=203=20?=
 =?UTF-8?q?=E5=BC=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- .best-practices 增加 max-width: 480px（原撑满 720px 容器），
  卡片宽度 ~232px → ~152px；标题行共用该宽度以与卡片边缘对齐
- 移除 1200px / 768px 两处列数折叠，任何视口宽度下卡片均保持一行 3 张；
  变窄时收缩 480px 上限而非减少列数，避免第三张换到第二行
- 列宽改为 minmax(0, 1fr)，防止内容撑破列宽
- .card-meta 增加省略号截断，避免窄屏下溢出卡片

Co-Authored-By: Claude Code <noreply@anthropic.com>
---
 .../src/views/tools/SmartAssistantPage.vue    | 23 ++++++++++---------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/eai_agentplatform/frontend/src/views/tools/SmartAssistantPage.vue b/eai_agentplatform/frontend/src/views/tools/SmartAssistantPage.vue
index 988239a..cd83c90 100644
--- a/eai_agentplatform/frontend/src/views/tools/SmartAssistantPage.vue
+++ b/eai_agentplatform/frontend/src/views/tools/SmartAssistantPage.vue
@@ -393,7 +393,10 @@ function handleReference() {
 
 /* ===== BEST PRACTICE CARDS ===== */
 .best-practices {
+  /* Capped narrower than .welcome-content so the cards don't stretch to 720px;
+     the header shares this width, keeping it aligned with the card edges. */
   width: 100%;
+  max-width: 480px;
   border-top: 1px solid #eef1f6;
   padding-top: 20px;
 }
@@ -431,7 +434,7 @@ function handleReference() {
 
 .practices-grid {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 12px;
 }
 
@@ -483,6 +486,11 @@ function handleReference() {
 .card-meta {
   font-size: 11px;
   color: #909399;
+  /* The row stays 3-across on narrow screens, so this clips rather than
+     overflowing the card when space runs out. */
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 /* ===== CHAT MESSAGE STYLES ===== */
@@ -654,17 +662,10 @@ function handleReference() {
 }
 
 /* ===== RESPONSIVE ===== */
-@media (max-width: 1200px) {
-  .practices-grid {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-
+/* The practice cards stay 3-across at every width — narrowing the viewport
+   shrinks the 480px cap rather than dropping to fewer columns, so the row
+   never wraps to a second line. */
 @media (max-width: 768px) {
-  .practices-grid {
-    grid-template-columns: 1fr;
-  }
-
   .category-pill {
     padding: 6px 10px;
     font-size: 12px;