You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
Repository navigation
site(pricing): keep the ring line out of the "Most popular" marker - #8746
On /pricing, the always-lit spectrum ring on the popular plan card was drawing a 1px gradient line straight through the "Most popular" badge that straddles the card's top edge.
The perf refactor in #8480 replaced the card's CSS ring (a ::before pseudo-element, which painted under the badge) with <SpectrumRing />, which is deliberately placed last among the card's children so it paints over decorative layers — and that now included the badge. The marker's opaque white background masks the card border, but not a ring painted after it.
The fix gives the marker z-10, the same treatment the straddling badges on comparison-cards already get, so it masks the ring line again. No visual change other than removing the line from the badge; the ring still paints over the card's other (non-positioned) decorative layers.
Test plan
sitetypes:check passes (note: @prisma-docs/uitypes:check fails on clean main as well — pre-existing, unrelated).
oxlint and oxfmt clean on the touched file.
On /pricing at ≥1440px, the top spectrum ring line on the Starter plan card no longer crosses the "Most popular" marker; the calculator's "Recommended" marker and the comparison column are unchanged (their markers are inline, not straddling).
Created by Gremlin
Summary by CodeRabbit
Style
Improved the visibility of the “Most popular” label when it overlaps other content and adjusted its line wrapping.
#8480 swapped the plan card's CSS ring for <SpectrumRing />, which is
placed last among the card's children so it paints over decorative
layers — including the marker straddling the card's top edge, so the
1px spectrum line crossed straight through the badge. Give the marker
z-10, the same treatment as the straddling badges on comparison-cards,
so it masks the ring again.
Co-Authored-By: Gremlin <gremlin[bot]@users.noreply.github.com>
The pricing marker stacking fix is ready to merge.
Pre-merge checks: 5
Check name
Status
Explanation
Description Check
Check skipped - CodeRabbit’s high-level summary is enabled.
Title check
The title clearly describes the main change: preventing the spectrum ring from crossing the “Most popular” marker on the pricing page.
Docstring Coverage
No eligible functions found in the changed files. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff with cyclomatic complexity of at least 2. Documentat…
Linked Issues check
Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check
Check skipped because no linked issues were found for this pull request.
Full details: Docstring Coverage
Explanation
No eligible functions found in the changed files. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff with cyclomatic complexity of at least 2. Documentation-only edits and deletions within surviving functions are included; unchanged diff context and fully deleted functions are excluded. Analyzed 0 functions across 1 files.
Finishing Touches
Generate docstrings
Commit to this branch
Create a new PR
Generate unit tests (beta)
Commit to this branch
Create a new PR
Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts
Recent review info
Run configuration
Source mode: Auto
Repository: Unavailable
Branch: Unavailable
File: No configuration file from this repository applied
Commit: Unavailable
Layers: Repository UI
Review profile: CHILL
Plan: Essentials
Run ID: 51904f72-9640-41ab-a660-a8fae718726a
Commits
Reviewing files that changed from the base of the PR and between 1ce9c9c and 9139b0d.
Included review availability: This review used your included allowance. 3 included reviews remain after this review. Your included PR review attempts over the past 7 days set your current allowance at 5 reviews per hour.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Summary
On
/pricing, the always-lit spectrum ring on the popular plan card was drawing a 1px gradient line straight through the "Most popular" badge that straddles the card's top edge.The perf refactor in #8480 replaced the card's CSS ring (a
::beforepseudo-element, which painted under the badge) with<SpectrumRing />, which is deliberately placed last among the card's children so it paints over decorative layers — and that now included the badge. The marker's opaque white background masks the card border, but not a ring painted after it.The fix gives the marker
z-10, the same treatment the straddling badges on comparison-cards already get, so it masks the ring line again. No visual change other than removing the line from the badge; the ring still paints over the card's other (non-positioned) decorative layers.Test plan
sitetypes:checkpasses (note:@prisma-docs/uitypes:checkfails on cleanmainas well — pre-existing, unrelated).oxlintandoxfmtclean on the touched file./pricingat ≥1440px, the top spectrum ring line on the Starter plan card no longer crosses the "Most popular" marker; the calculator's "Recommended" marker and the comparison column are unchanged (their markers are inline, not straddling).Created by Gremlin
Summary by CodeRabbit