Repository navigation
[Bug Fix] Overlays: use shadcn's nova overlay on every modal - #572
Open
leonardo-vsilva wants to merge 1 commit into
Open
leonardo-vsilva wants to merge 1 commit into
leonardo-vsilva wants to merge 1 commit into
Conversation
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
Each modal paints its own backdrop: Dialog, Sheet and CommandDialog use the theme background at 80% with a blur, a light veil in light mode, while AlertDialog uses black at 80%. None of them matches shadcn, whose default nova style gives every overlay the same value. Use that value on all four: `bg-black/10` with `supports-backdrop-filter:backdrop-blur-xs`, black in both themes and blurred only where the browser supports it. Dialog takes it through the `backdrop:` variant on its native `<dialog>`. Keep the classes inline, since `ruby_ui:component` never touches the app's stylesheet. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
leonardo-vsilva
force-pushed
the
fix/modal-overlay
branch
from
October 23, 2026 16:14
a6668e5 to
a9a5d1f
Compare
This branch has not been deployed
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Related issue
No existing issue — happy to open one if you'd prefer to track it there.
Description
The four modal overlays each paint a different backdrop:
Dialog,SheetandCommandDialoguse the theme background at 80% with a blur (a light veil in light mode), whileAlertDialoguses black at 80% with a blur.shadcn's current default style (
nova,apps/v4/registry/styles/style-nova.css) gives every overlay —.cn-dialog-overlay,.cn-alert-dialog-overlay,.cn-sheet-overlay,.cn-drawer-overlay— the same value:bg-black/10 supports-backdrop-filter:backdrop-blur-xs, black in both themes with no.darkoverride, blurred only wherebackdrop-filteris supported. This applies it to all four:DialogContent:backdrop:bg-black/10 backdrop:supports-backdrop-filter:backdrop-blur-xson the native<dialog>'s::backdrop;AlertDialogContent,SheetContent,CommandDialogContent:bg-black/10 supports-backdrop-filter:backdrop-blur-xson the overlaydiv.Classes stay inline rather than in a shared
@utility, sinceruby_ui:componentnever touches the app's stylesheet and existing installs would lose the overlay. Tailwind compilesbg-black/10with a literal#0000001afallback, so the color holds even where::backdropdoesn't see the theme's custom properties.Each component gets a test pinning the overlay, and
mcp/data/registry.jsonis rebuilt (cd mcp && bundle exec rake mcp:build).In dark mode the change is barely visible (10% black over a near-black page), so the screenshots below are light mode.
Testing instructions
cd gem && bundle exec rake— 298 runs, 0 failures;standardrbclean across 402 files.cd docs && bin/dev, open/docs/dialog,/docs/alert_dialog,/docs/sheetand/docs/command(⌘K): each overlay is the same faint black veil with a light blur, in light and dark mode.