style: 智能助手最佳实践卡片收窄，固定一行 3 张

- .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>

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;