Skip to content

fix(landing): align skill-watch card heights, widen description clamp#17

Merged
Markeljan merged 1 commit into
mainfrom
claude/sad-johnson-7c49ca
May 12, 2026
Merged

fix(landing): align skill-watch card heights, widen description clamp#17
Markeljan merged 1 commit into
mainfrom
claude/sad-johnson-7c49ca

Conversation

@Markeljan
Copy link
Copy Markdown
Collaborator

Summary

The skill-watch card grid had two visible issues:

  • Inconsistent card heights. The description block was rendered conditionally ({description && …}), so skills with no description rendered no block at all, while skills with 1- or 2-line descriptions rendered different heights. The grid laid them out at uneven heights, producing the misaligned-row look in the screenshot.
  • Awkward mid-sentence truncation. line-clamp-2 on the dataset's long descriptions frequently chopped mid-quote ("i…) or right after a short connector word (via…), making the cutoff feel unintentional.

Changes

apps/landing/app/skill-watch/SkillWatchTable.tsx

  • Always render the description container with min-h-[88px] (~3 lines reserved), so every card occupies the same vertical slot in the grid regardless of description length.
  • Bump from line-clamp-2line-clamp-3 for more breathing room and fewer mid-thought cuts.
  • Add title={description} so the full description is reachable via native tooltip.
  • Show a muted italic No description provided. placeholder when description is empty, instead of collapsing the block.

Verification

  • Loaded /skill-watch against the live dataset in next dev.
  • DOM inspection across a 12-card sample: every card rendered at uniform 450px height; cards with long descriptions capped at exactly 3 × 20.15px (60.45px) — line-clamp clipping as expected.
  • bun run lint clean for the changed file; typecheck passes.

Note: Chrome's getComputedStyle reports display: flow-root after overflow: hidden, but -webkit-line-clamp is still honored — confirmed by measuring rendered heights.

Test plan

  • Open /skill-watch, scroll to "Every skill, every score." inventory grid
  • Verify all cards in a row align to the same height
  • Hover a truncated description — full text appears in browser tooltip
  • Confirm skills with empty descriptions show the italic placeholder rather than a collapsed block

🤖 Generated with Claude Code

The description block was rendered conditionally, so cards with no
description had no block at all — producing inconsistent card heights
across the grid. line-clamp-2 also frequently cut mid-quote/mid-word
on the dataset's long descriptions.

- Always render the description container with min-h-[88px] so every
  card occupies the same vertical space in the grid.
- Bump line-clamp-2 to line-clamp-3 so truncation lands on more
  complete thoughts.
- Add title={description} for a native tooltip with the full text.
- Show a muted italic placeholder for skills with no description.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@Markeljan Markeljan merged commit 3d24268 into main May 12, 2026
1 check passed
@Markeljan Markeljan deleted the claude/sad-johnson-7c49ca branch May 12, 2026 18:37
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant