Skip to content

fix: clip color name text to swatch boundaries#2

Merged
mpge merged 1 commit intomasterfrom
fix/text-overflow-clipping
Apr 5, 2026
Merged

fix: clip color name text to swatch boundaries#2
mpge merged 1 commit intomasterfrom
fix/text-overflow-clipping

Conversation

@mpge
Copy link
Copy Markdown
Owner

@mpge mpge commented Apr 5, 2026

Summary

  • Adds SVG <clipPath> elements to each swatch so text (color names and hex codes) never overflows into adjacent swatches
  • Dynamically scales down the name font size when the estimated text width exceeds the available swatch width (minimum 8px)
  • Particularly affects palettes with 10+ colors or colors with long names where swatches are small

Closes #1

Test plan

  • All 89 existing tests pass
  • Visually verify the 10-color palette from the issue: /api/palette/FF595E,FF924C,FFCA3A,C5CA30,8AC926,36949D,1982C4,4267AC,565AA0,6A4C93.svg
  • Test with palettes of 2-10+ colors to confirm no regressions
  • Verify long color names (e.g. "Vivid Tangelo", "Radical Red") are contained within their swatches

Add clipPath elements to each swatch so text never overflows into
adjacent swatches. Also scale down the name font size when the
estimated text width exceeds the available swatch width, with a
minimum font size of 8px.

Closes #1
@mpge mpge merged commit 60bf88c into master Apr 5, 2026
7 checks passed
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.

Color names sometimes exceeding palett

1 participant