fix(css): incorrect shape for artist profile picture

[KamilWachnicki]

Summary by CodeRabbit

• Style
  • Updated card image styling to appear fully rounded.
  • Improved metadata text truncation so card details stay cleaner and more consistent across displays.

[coderabbitai]

📝 Walkthrough

Walkthrough

The appended CSS snippet used to patch xpui.css/xpui-snapshot.css was updated: card image wrapper border-radius changed from 6px to 50%, and card metadata rules now include a standard line-clamp:2 property alongside the existing -webkit-line-clamp:2.

Changes

CSS Patch Update

Layer / File(s)	Summary
Update appended CSS rules src/preprocess/preprocess.go	Changes card image border-radius to 50% and adds standard line-clamp property to card metadata styling.

Estimated code review effort: 1 (Trivial) | ~2 minutes

Poem

A rabbit hopped through CSS lines,
Squared corners rounded into circles fine,
Two clamps now stand where one stood tall,
A tiny tweak, but neat withal. 🐰✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Title check	✅ Passed	The title clearly matches the main CSS fix for the artist profile picture shape.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/preprocess/preprocess.go`:
- Line 299: The circular border-radius change is applied too broadly through
main-cardImage-imageWrapper, which affects multiple card types. Update the
styling so only artist cards get the 50% radius by targeting the existing
main-cardImage-circular marker (or another artist-specific selector) instead of
the shared wrapper class, and keep the shared card artwork styles unchanged.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 6aaeed2e-1513-4e27-a5b9-8a8b2768d577

📥 Commits

Reviewing files that changed from the base of the PR and between e1f6681 and a145196.

📒 Files selected for processing (1)

• src/preprocess/preprocess.go

[coderabbitai]

🎯 Functional Correctness | 🟠 Major | ⚡ Quick win

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
set -euo pipefail

printf '\n== File listing ==\n'
git ls-files | rg '^(src/preprocess/preprocess\.go|.*css-map\.json|.*package\.json|.*\.html|.*\.tsx?|.*\.jsx?)$' || true

printf '\n== Find relevant class names ==\n'
rg -n --hidden --no-ignore-vcs 'main-cardImage-(imageWrapper|circular)|main-card-cardMetadata|line-clamp' .

printf '\n== Inspect preprocess line region ==\n'
nl -ba src/preprocess/preprocess.go | sed -n '285,310p'

printf '\n== Inspect css-map references if present ==\n'
for f in $(git ls-files | rg 'css-map\.json$'); do
  echo "--- $f"
  rg -n 'main-cardImage-(imageWrapper|circular)|main-card-cardMetadata' "$f" || true
done

Repository: spicetify/cli

Length of output: 8881

---

🏁 Script executed:

#!/bin/bash
set -euo pipefail
pwd
git ls-files 'src/preprocess/preprocess.go' '*css-map.json'

Repository: spicetify/cli

Length of output: 212

---

🏁 Script executed:

#!/bin/bash
set -euo pipefail

# Show the exact change around the modified line and any surrounding class names.
nl -ba src/preprocess/preprocess.go | sed -n '294,302p'

# Locate the CSS map entries that mention the wrapper and circular variants.
for f in $(git ls-files | rg 'css-map\.json$'); do
  echo "--- $f"
  rg -n 'main-cardImage-(imageWrapper|circular)' "$f" || true
done

Repository: spicetify/cli

Length of output: 191

---

🏁 Script executed:

#!/bin/bash
set -euo pipefail

# Search for actual markup/DOM usage of the circular class.
rg -n --hidden --no-ignore-vcs 'main-cardImage-circular' .

# Search for the generic wrapper usage to see whether the selector is shared.
rg -n --hidden --no-ignore-vcs 'main-cardImage-imageWrapper' .

Repository: spicetify/cli

Length of output: 4190

---

Scope the circular radius to artist cards only.
main-cardImage-imageWrapper is used by multiple card types in this repo, so changing it to border-radius:50% will make album/playlist/podcast artwork circular too. Use the dedicated main-cardImage-circular marker (or an equivalent artist-only selector) for this shape change instead.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/preprocess/preprocess.go` at line 299, The circular border-radius change
is applied too broadly through main-cardImage-imageWrapper, which affects
multiple card types. Update the styling so only artist cards get the 50% radius
by targeting the existing main-cardImage-circular marker (or another
artist-specific selector) instead of the shared wrapper class, and keep the
shared card artwork styles unchanged.