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

@@ -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": {

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, {

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>
         )}

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;
+}
+
 /* ═══════════════════════════════════════════
    样式细节增强（不改颜色，只改交互/布局/字体）
    ═══════════════════════════════════════════ */