fix(landing): align skill-watch card heights, widen description clamp#17
Merged
Conversation
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>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
The skill-watch card grid had two visible issues:
{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.line-clamp-2on 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.tsxmin-h-[88px](~3 lines reserved), so every card occupies the same vertical slot in the grid regardless of description length.line-clamp-2→line-clamp-3for more breathing room and fewer mid-thought cuts.title={description}so the full description is reachable via native tooltip.No description provided.placeholder whendescriptionis empty, instead of collapsing the block.Verification
/skill-watchagainst the live dataset innext dev.bun run lintclean for the changed file; typecheck passes.Note: Chrome's
getComputedStylereportsdisplay: flow-rootafteroverflow: hidden, but-webkit-line-clampis still honored — confirmed by measuring rendered heights.Test plan
/skill-watch, scroll to "Every skill, every score." inventory grid🤖 Generated with Claude Code