fix(Dribbblish): fix cinema view layout

[Sol-Studio]

before:

after:

Summary by CodeRabbit

• Style
  • Enhanced Cinema View layout with increased left padding and margins for the main, side, and now-playing areas.
  • Removed rounded corners on select panels for a flush appearance.
  • Reworked top-area layout into a four-row arrangement to better position banner, global navigation, side/main content, and now-playing bar.

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: cf05791a-584b-4ca1-9869-7f8d7636f7ef

📥 Commits

Reviewing files that changed from the base of the PR and between 7fa7ea0 and 3b022c3.

📒 Files selected for processing (1)

• Dribbblish/user.css

---

Walkthrough

This is a CSS-only change adding an html[data-cinema-npv-postenter] block that customizes Cinema View: adjusts left padding and border-radius for Root__cinema-view, increases left margins for Root__globalNav and Root__now-playing-bar, and overrides Root__top-container grid-template-areas to a 4-row layout.

Changes

Cinema View CSS Styling

Layer / File(s)

Summary

Cinema View layout overrides Dribbblish/user.css

Adds html[data-cinema-npv-postenter] block: sets Root__cinema-view left padding to 10px and second-child border-radius: 0, increases margin-left of Root__globalNav and Root__now-playing-bar to 10px (now-playing-bar uses !important), and redefines Root__top-container grid-template-areas to a 4-row layout (top-banner, global-nav, left-sidebar/main-view/right-sidebar, now-playing-bar) with !important.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~7 minutes

Possibly related PRs

• spicetify/spicetify-themes#1226: Modifies Dribbblish/user.css grid-template-areas and placements of now-playing/global-nav similar to this cinema-view layout change.
• fix(Dribbblish): fix back shadow layout #1256: Adjusts Dribbblish/user.css layout positioning related to the now-playing-bar row.

Suggested reviewers

• kyrie25

Poem

🐰 I hopped into cinema light,
Poked at paddings left and slight,
Rounded corners fled the night,
Grids rearranged to fit just right,
Now the view feels calm and bright.

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: fixing the cinema view layout in the Dribbblish theme through CSS modifications.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

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

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@Dribbblish/user.css`:
- Around line 953-974: The nested CSS under html[data-cinema-npv-postenter] is
invalid for Spicetify; rewrite each nested rule as a flattened selector by
prefixing them with the ancestor: replace the nested blocks for
.Root__cinema-view, .Root__cinema-view:nth-child(2), .Root__globalNav,
.Root__top-container and .Root__now-playing-bar with standard selectors like
html[data-cinema-npv-postenter] .Root__cinema-view { ... } (and likewise for the
nth-child and other classes), keeping the same declarations (including
!important where present).