fix(library): drop violet halo around artist tiles on dark portraits (#106)#113
Conversation
…106) The Artists grid wrapped each image in a `FadeInImage` whose wrapper carried `border border-violet-200/60 dark:border-violet-800/40`. On a `rounded-full` clip, that 1 px border is drawn along the outer perimeter, just outside the image's circular mask — invisible on bright portraits, very visible as a colored halo on dark ones (A-ha, Gary Moore in the report). Remove the border from the image branch only. The placeholder gradient stays (it's covered by `object-cover` once the image decodes), and the no-image fallback branch keeps its border since it's intentional decoration on the empty state. The Artist detail page never had this halo because its `<img>` renders without a wrapper border.
📝 WalkthroughWalkthroughSuppression de la classe de bordure autour de l'avatar d'artiste dans le composant ChangesSuppression de la bordure d'avatar d'artiste
🎯 1 (Trivial) | ⏱️ ~3 minutes
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Comment |
Closes #106.
Summary
The Artists main grid wraps each image in a
FadeInImagewhose wrapper carriedborder border-violet-200/60 dark:border-violet-800/40. On a `rounded-full` clip, that 1 px violet border is drawn along the outer perimeter of the circular mask — invisible on bright portraits, very visible as a colored halo on dark ones (A-ha, Gary Moore in the issue screenshots).Fix: remove the violet border from the image branch only. The placeholder gradient stays (it's fully covered by `object-cover` once the image decodes, and provides backdrop during the brief loading flash). The no-image fallback branch is untouched — its border is intentional decoration around the initial-letter placeholder.
The Artist detail view (`ArtistDetailView.tsx`) was already clean because its `
` renders without a wrapper border (only `shadow-lg`), which matches the new behavior on the grid.
Test plan
Summary by CodeRabbit