feat(snippets): add Smaller Lyrics snippet to reduce font size

[drandarov-io]

Add a snippet that changes the lyrics font size from:

• var(--encore-text-size-larger-3)
  to:
• var(--encore-text-size-larger-2)

Summary by CodeRabbit

• New Features
  • Added "Smaller Lyrics" customization snippet: Users can now reduce the lyrics display font size by one level for a more compact view, allowing more lyrical content to be visible on screen simultaneously and providing greater flexibility in display preferences.

[coderabbitai]

Walkthrough

A new CSS snippet entry is added to the snippets registry that adjusts lyrics display to a smaller font size via CSS variable modification, including metadata and preview image reference.

Changes

Cohort / File(s)	Summary
Snippet Registry Update resources/snippets.json	Added new "Smaller Lyrics" snippet object to the snippets array with CSS rule updating .lyrics-lyricsContent-text font-size variable, description, and preview image path

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

• No logic changes, purely data addition to JSON
• Single file modification with straightforward object insertion
• Verify CSS variable value correctness and preview image exists at referenced path

Suggested reviewers

• rxri
• kyrie25

Poem

🐰 A snippet springs forth, neat and bright,
Lyrics shrink down to the perfect height,
One variable tweaked with font-size care,
Smaller text dancing through the air! ✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The pull request title "feat(snippets): add Smaller Lyrics snippet to reduce font size" directly aligns with the changeset, which adds a new snippet entry to resources/snippets.json for reducing lyrics font size. The title is concise, specific, and uses appropriate conventional commit formatting. It clearly identifies the main change (adding the "Smaller Lyrics" snippet) and its purpose, allowing a teammate to understand the primary intent without ambiguity. The title avoids vague terms and accurately reflects what was implemented according to the PR objectives.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

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 and usage tips.}

[coderabbitai]

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 16dcd5e and d427187.

⛔ Files ignored due to path filters (1)

• resources/assets/snippets/smaller-lyrics.png is excluded by !**/*.png

📒 Files selected for processing (1)

• resources/snippets.json (1 hunks)

[coderabbitai]

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

Verify CSS selector and preview image file.

The new snippet entry is properly formatted and integrates well with the existing JSON structure. However, I need to verify the CSS selector and confirm the preview image file exists.

The selector .lyrics-lyricsContent-text differs from other lyrics-related snippets ("Better lyrics style" on line 143 and "Pretty Lyrics" on line 227), which use more comprehensive selectors targeting .lyrics-lyrics-contentContainer or .lyrics-lyrics-contentWrapper. Ensure the selector correctly targets all lyrics text on the current Spotify UI.

---

🏁 Script executed:

#!/bin/bash
# Verify preview image file exists and check the file structure

# Check if the preview image file exists
if [ -f "resources/assets/snippets/smaller-lyrics.png" ]; then
    echo "✓ Preview image file exists"
    file "resources/assets/snippets/smaller-lyrics.png"
else
    echo "✗ Preview image file NOT found at: resources/assets/snippets/smaller-lyrics.png"
fi

# List nearby snippet asset files for reference
echo ""
echo "Nearby snippet asset files:"
ls -lah resources/assets/snippets/ | tail -20

Length of output: 1604

---

---

🏁 Script executed:

```shell
#!/bin/bash
# Extract all lyrics-related snippets and their selectors to compare

# Use jq to parse JSON and filter for snippets with "lyrics" in title or description (case-insensitive)
# and display their titles and CSS selectors

echo "=== All lyrics-related snippets and their selectors ==="
jq -r '.[] | select((.title | ascii_downcase) contains("lyric") or (.description | ascii_downcase) contains("lyric")) | "\(.title)\n  Selector: \(.code | match("[^{]+") | .string)\n"' resources/snippets.json

echo ""
echo "=== Checking for any other references to 'lyricsContent' selector ==="
grep -n "lyricsContent" resources/snippets.json

Length of output: 2236

---

Fix CSS selector — .lyrics-lyricsContent-text does not exist in other Spotify lyrics snippets.

The preview image file exists and is valid. However, the CSS selector is incorrect.

The selector .lyrics-lyricsContent-text appears only in this new snippet and does not match the pattern established by other lyrics-related snippets:

• Line 143 targets .lyrics-lyrics-contentContainer .lyrics-lyricsContent-lyric
• Line 227 targets .lyrics-lyrics-contentWrapper with .lyrics-lyricsContent-* classes
• Line 245 targets .lyrics-lyricsContent-lyric

The .lyrics-lyricsContent-text class does not exist in any other snippet. Based on the established patterns, this should likely target .lyrics-lyricsContent-lyric instead to affect the individual lyrics text.

🤖 Prompt for AI Agents

In resources/snippets.json around lines 535 to 541 the CSS selector
".lyrics-lyricsContent-text" is incorrect and does not match the project's
established lyrics selectors; replace that selector with
".lyrics-lyricsContent-lyric" so the rule targets individual lyric lines (keep
the rest of the snippet unchanged and verify the preview image path remains
correct).

[rxri]

This can be added as custom CSS locally. Useless to have in marketplace. sorry.

[drandarov-io]

I see.
Just for clarification: Is there a guideline what constitutes a useful snippet?

CONTRIBUTING.md does not seem to include any infos about that.