Skip to content

feat: redesign match tooltip with two-column breakdown and fix badge visibility#8

Merged
LavishSphere merged 1 commit into
mainfrom
feat/tooltip-breakdown-redesign
Jun 23, 2026
Merged

feat: redesign match tooltip with two-column breakdown and fix badge visibility#8
LavishSphere merged 1 commit into
mainfrom
feat/tooltip-breakdown-redesign

Conversation

@cheangie

Copy link
Copy Markdown
Collaborator

Summary

Redesigns the MatchTooltip and fixes visibility/positioning of the similarity % badge on title cards.

  • Two-column tooltip — 420px horizontal layout: final score + per-signal contributions (Content/IMDb/Popularity) on the left, content breakdown bars (description/genres/cast/director) on the right. Values shown as percentages instead of decimals.
  • Portal positioning — tooltip renders through a body portal with fixed positioning (card badge + drawer % match ↗), so it pops above the card and is never clipped by the scroll row or drawer overflow.
  • Badge over posters — moved the % badge inside the card face (zIndex 2) so it stays visible/hoverable over poster images, with a drop/text shadow for legibility on bright posters.
  • Font fix — applied the app font stack explicitly since the tooltip renders in a portal.

Testing

  • npm run lint passes (--max-warnings 0)
  • npm run build passes

…visibility

- Rework MatchTooltip into a 420px horizontal two-column layout: final
  score + per-signal contributions on the left, content breakdown bars
  on the right; show percentages instead of decimals
- Render tooltip via a body portal with fixed positioning (card badge and
  drawer badge) so it is never clipped by the scroll row or drawer overflow
- Move the % badge inside the card face with zIndex:2 so it stays visible
  and hoverable over poster images, plus a drop/text shadow for legibility
- Apply the app font stack explicitly since the tooltip renders in a portal

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@cheangie cheangie requested a review from LavishSphere June 23, 2026 06:10
@LavishSphere LavishSphere merged commit 88fc276 into main Jun 23, 2026
4 checks passed
@LavishSphere LavishSphere deleted the feat/tooltip-breakdown-redesign branch June 23, 2026 06:19
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.

2 participants