fix: install card text overflow style

[geoffrey-xiao]

Summary

Fixes the install card layout on skill detail pages.

Changes

• replace generic install entry markup with dedicated install-card structure
• improve spacing and typography for install entries
• make install commands wrap cleanly inside the card
• keep install metadata styling consistent with the surrounding panels

before

after

Files changed

• src/components/SkillInstallCard.tsx
• src/styles.css

Notes

• style-only change
• no backend or behavior changes

[vercel]

@geoffrey-xiao is attempting to deploy a commit to the 0xBuns Team on Vercel.

A member of the Team first needs to authorize it.

[greptile-apps]

Greptile Summary

This is a focused, style-only fix that resolves install-command text overflow inside the install panel on skill detail pages. It replaces the generic stat class on install entries with a dedicated set of skill-install-entry* classes, moves all previously-inline styles into src/styles.css, and adds overflow-wrap: anywhere / white-space: pre-wrap on the command <code> element so long commands wrap cleanly inside the card.

Key changes:

• SkillInstallCard.tsx: outer wrapper switched from .stat → .skill-install-entry; inner div and <code> receive dedicated class names; all inline style props removed.
• styles.css: align-content: start added to .skill-panel and .skill-panel-body (prevents grid rows from over-stretching); new .skill-install-entry, .skill-install-entry-body, .skill-install-meta, and .skill-install-command classes introduced.
• .skill-install-entry-body strong now inherits color: var(--ink-soft) from its parent, giving the label a softer appearance — this matches the "after" screenshot and appears intentional.
• One very minor point: word-break: break-word on .skill-install-command (line 2117) is a non-standard legacy value and is already covered by overflow-wrap: anywhere on the line above — it can be safely removed.

Confidence Score: 5/5

• This is a safe, style-only change with no logic, API, or data-flow impact — safe to merge.
• All changes are confined to CSS class names and stylesheet rules. No business logic, data fetching, or component interfaces are modified. The fix correctly addresses the overflow problem using standard CSS techniques. The single comment left is a cosmetic nit (redundant word-break) that does not affect functionality.
• No files require special attention.

Prompt To Fix All With AI

This is a comment left during a code review.
Path: src/styles.css
Line: 2116-2117

Comment:
**Redundant `word-break` declaration**

`word-break: break-word` is a legacy, non-standard value (not in the W3C spec for `word-break`) and is redundant here since `overflow-wrap: anywhere` already instructs the browser to break at arbitrary points when no other soft-wrap opportunity exists. The combination is harmless but adds noise.

```suggestion
  overflow-wrap: anywhere;
```

How can I resolve this? If you propose a fix, please make it concise.

_{Last reviewed commit: 20faef8}

[greptile-apps]

Redundant word-break declaration

word-break: break-word is a legacy, non-standard value (not in the W3C spec for word-break) and is redundant here since overflow-wrap: anywhere already instructs the browser to break at arbitrary points when no other soft-wrap opportunity exists. The combination is harmless but adds noise.

Suggested change

	overflow-wrap: anywhere;
	word-break: break-word;
	overflow-wrap: anywhere;

Prompt To Fix With AI

This is a comment left during a code review.
Path: src/styles.css
Line: 2116-2117

Comment:
**Redundant `word-break` declaration**

`word-break: break-word` is a legacy, non-standard value (not in the W3C spec for `word-break`) and is redundant here since `overflow-wrap: anywhere` already instructs the browser to break at arbitrary points when no other soft-wrap opportunity exists. The combination is harmless but adds noise.

```suggestion
  overflow-wrap: anywhere;
```

How can I resolve this? If you propose a fix, please make it concise.