fix(css): artist profile picture fix affecting all images

[KamilWachnicki]

Follow up to #3885

My previous fix affected all image wrappers which at first they didn't appear broken but when i visited the marketplace some extensions had broken shape, the fix was to revert the border-radius:50% to 6px and wrap .main-cardImage-imageWrapper in a where:() letting Spotify's hashed CSS class that applies to only artists win over the one injected, now only the artists should see the circular card border and it will remain working when Spotify re-hashes it's classes.

Built and checked that the CSS wins over the injected one.

My bad for the previous PR.

Summary by CodeRabbit

• Style
  • Updated main layout styling, including fixed-width grid calculations for improved consistency.
  • Refined player card image presentation: configurable border-radius for standard images (defaulting to rounded corners), while preserving fully circular rounding when the circular variant is used.
  • Adjusted image wrapper/shadow styling and improved metadata truncation for cleaner, single-line display.
  • Enhanced play button hover/focus interactions and corrected bullet marker rendering.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 7daaceaa-f9e1-46e1-81bc-fdabb9f303a3

📥 Commits

Reviewing files that changed from the base of the PR and between df5746d and d1126fb.

📒 Files selected for processing (1)

• src/preprocess/preprocess.go

🚧 Files skipped from review as they are similar to previous changes (1)

• src/preprocess/preprocess.go

---

📝 Walkthrough

Walkthrough

This PR updates the preprocessing CSS patch for xpui.css and xpui-snapshot.css and adds a CSS map entry for a new circular main-card image class.

Changes

CSS Patch Update

Layer / File(s)	Summary
Updated main-card CSS template src/preprocess/preprocess.go, css-map.json	Replaces the appended CSS literal with updated main-grid and main-card rules, changes the default image-wrapper border-radius, adds the circular override, and adds the class mapping for main-cardImage-circular.

Estimated code review effort: 2 (Simple) | ~10 minutes

Possibly related PRs

• spicetify/cli#3885: Updates the same CSS patching logic in src/preprocess/preprocess.go within Start, including related .main-cardImage-imageWrapper and .main-card-cardMetadata rules.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly reflects the CSS fix for artist profile images that was accidentally affecting all images.
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.

✨ 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: 3

🤖 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 metadata separator in the CSS emitted by
preprocess/preprocess.go is using mojibake instead of a bullet character. Update
the generation logic for the card metadata separator in the relevant
preprocessing path so it emits the correct bullet symbol rather than the garbled
string, and verify the symbol is preserved with the proper encoding in the
output produced by the preprocessing step.
- Line 299: The width declaration in main-gridContainer-fixedWidth has an
invalid calc() expression because the calculation is closed too early and leaves
trailing unmatched text, so the browser drops the rule. Fix the width value so
the entire sum for the grid width is contained inside a single calc() in the
same declaration, keeping the existing main-gridContainer-fixedWidth selector
and its column variables intact.
- Line 299: The `.main-card-cardMetadata` rule is using `line-clamp` and
`-webkit-line-clamp` but is missing the required `overflow:hidden` for the clamp
to actually truncate text. Update the CSS in `preprocess.go` where the
`.main-card-cardMetadata` / `.v3isO2phyJAoZRkmme0G` styles are emitted so the
clamped metadata block hides overflowing content while keeping the existing
`display:-webkit-box` and `-webkit-box-orient:vertical` behavior.

🪄 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: ee523085-4d40-43dd-8e71-3f6561a0906e

📥 Commits

Reviewing files that changed from the base of the PR and between cd588f3 and f3b863b.

📒 Files selected for processing (1)

• src/preprocess/preprocess.go

[rxri]

These selectors are really bad in terms of performance so ig we should fix it in completely other way

[KamilWachnicki]

I think i got what u were saying

[KamilWachnicki]

also could i improve the preprocess file by using go:embed to split the css we append to another file, it's horrible trying to read that line

[rxri]

See if any of the comments from coderabbit are applicable, and leave that file alone for now. Not worth refactoring

[KamilWachnicki]

Replaced content:"•" with a proper "\2022" escape character, cleaner border-radius handling imo, removed the extra parenthesis in width calculation, proper overflow handling. Built and tested with themes.

[rxri]

thx