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;