From 50886a01cbaeb28d012e2c011ef4b38b40360a80 Mon Sep 17 00:00:00 2001
From: XiaoSeS <87064762+XiaoSeS@users.noreply.github.com>
Date: Mon, 7 Sep 2026 16:40:05 +0800
Subject: [PATCH] fix(web): clamp skill card summaries

Keep skill grids compact by reserving a stable three-line summary region while exposing the full description via the title attribute.

Made-with: Proma
Signed-off-by: XiaoSeS <87064762+XiaoSeS@users.noreply.github.com>
---
 web/package.json                          |  2 +-
 web/src/features/skill/skill-card.test.ts | 24 +++++++++++++++++++++++
 web/src/features/skill/skill-card.tsx     |  5 ++++-
 web/src/index.css                         | 10 ++++++++++
 4 files changed, 39 insertions(+), 2 deletions(-)

diff --git a/web/package.json b/web/package.json
index bb6ef7ee..8ca3ed7a 100644
--- a/web/package.json
+++ b/web/package.json
@@ -1,7 +1,7 @@
 {
   "name": "skillhub-web",
   "private": true,
-  "version": "0.1.13",
+  "version": "0.1.14",
   "type": "module",
   "packageManager": "pnpm@10.33.0",
   "pnpm": {
diff --git a/web/src/features/skill/skill-card.test.ts b/web/src/features/skill/skill-card.test.ts
index 2e7b9cdc..f1f87a16 100644
--- a/web/src/features/skill/skill-card.test.ts
+++ b/web/src/features/skill/skill-card.test.ts
@@ -40,6 +40,30 @@ describe('skill-card module exports', () => {
     expect(typeof mod.SkillCard).toBe('function')
   })
 
+  it('limits long summaries to the stable three-line description region', () => {
+    const summary = 'A long skill summary that should remain available as a tooltip while the visible card content stays clamped.'
+    const html = renderToStaticMarkup(
+      createElement(SkillCard, {
+        skill: {
+          id: 1,
+          slug: 'summary-writer',
+          displayName: 'Summary Writer',
+          summary,
+          downloadCount: 0,
+          starCount: 0,
+          ratingCount: 0,
+          namespace: 'global',
+          updatedAt: '2026-09-07T00:00:00Z',
+          canSubmitPromotion: false,
+        },
+      })
+    )
+
+    expect(html).toContain('skill-card-summary')
+    expect(html).toContain(`title="${summary}"`)
+    expect(html).toContain('[overflow-wrap:anywhere]')
+  })
+
   it('renders compliance badges from the skill summary snapshot', () => {
     const html = renderToStaticMarkup(
       createElement(SkillCard, {
diff --git a/web/src/features/skill/skill-card.tsx b/web/src/features/skill/skill-card.tsx
index 4d08d73f..f244bb34 100644
--- a/web/src/features/skill/skill-card.tsx
+++ b/web/src/features/skill/skill-card.tsx
@@ -77,7 +77,10 @@ export function SkillCard({ skill, onClick, highlightStarred = true }: SkillCard
         </div>
 
         {skill.summary && (
-          <p className="text-xs text-muted-foreground mb-3 line-clamp-2 leading-relaxed">
+          <p
+            className="skill-card-summary mb-3 text-xs leading-5 text-muted-foreground [overflow-wrap:anywhere]"
+            title={skill.summary}
+          >
             {skill.summary}
           </p>
         )}
diff --git a/web/src/index.css b/web/src/index.css
index f159f3d0..5be47fd4 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -567,6 +567,16 @@
   color: hsl(var(--text-placeholder));
 }
 
+/* 技能卡片描述固定为三行，避免长文案拉高网格；完整内容通过 title 提供。 */
+.skill-card-summary {
+  display: -webkit-box;
+  min-height: 3.75rem;
+  max-height: 3.75rem;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+}
+
 /* ═══════════════════════════════════════════
    样式细节增强（不改颜色，只改交互/布局/字体）
    ═══════════════════════════════════════════ */