feat: apply backdrop blur/overlay background styling to all modal windows#502
Draft
Power-Maverick wants to merge 4 commits intodevfrom
Draft
feat: apply backdrop blur/overlay background styling to all modal windows#502Power-Maverick wants to merge 4 commits intodevfrom
Power-Maverick wants to merge 4 commits intodevfrom
Conversation
Copy the global-search overlay pattern (semi-transparent backdrop + backdrop-filter blur) to all BrowserWindow-backed modals. - modalWindowManager: modal windows now fill the full main-window bounds so the overlay covers the entire app; injects --modal-panel-width and --modal-panel-height CSS vars so each panel keeps its intended size - sharedStyles: add .modal-overlay rule (fixed inset-0, rgba(0,0,0,0.5) background, backdrop-filter blur(4px), flex-centered); update .modal-panel to CSS-var sizing with border-radius and max constraints - All 10 modal view.ts files: wrap panel div in <div class="modal-overlay"> - Custom-panel modals (about, troubleshooting, updateNotification, toolDetail): inject .modal-overlay CSS inline and update panel class to CSS-var dimensions Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Revert the full-size window and CSS-var sizing modals remainchanges content-sized and centered as before. Only copy the visual background styling from the global-search overlay: - modalWindowManager: body gets background: rgba(0,0,0,0.5) and backdrop-filter: blur(4px) so the modal window shows the dark blurred backdrop behind the panel (through Electron transparent window) - Remove .modal-overlay wrapper divs and CSS var sizing from all modals - Restore .modal-panel to width/height: 100% in sharedStyles Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Bundle Size Report 📦
Bundle Analysis ReportsThe detailed bundle analysis reports are available in the workflow artifacts:
Download the artifacts from the workflow run to view interactive visualizations. Bundle size tracking is now active! This helps prevent bundle bloat. |
The backdrop-filter on a child BrowserWindow cannot blur the parent window's content (different OS-level windows). Instead, inject the overlay directly into the main the same approach therenderer global-search overlay uses. - index.html: add #modal-backdrop div (hidden by default) - styles.scss: .modal-backdrop mirrors the global-search overlay styles (position fixed, inset 0, rgba(0,0,0,0.5), backdrop-filter blur(4px)) - browserWindowModals.ts: listen to MODAL_WINDOW_OPENED/CLOSED events and toggle the backdrop div visibility - modalWindowManager.ts: revert body background to transparent (backdrop is now handled in the main renderer, not the modal window itself) Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Bundle Size Report 📦
Bundle Analysis ReportsThe detailed bundle analysis reports are available in the workflow artifacts:
Download the artifacts from the workflow run to view interactive visualizations. Bundle size tracking is now active! This helps prevent bundle bloat. |
- Show backdrop synchronously in showBrowserWindowModal() before awaiting the modal window, eliminating the timing gap where the modal appears before the dark overlay - Use display: flex for .modal-backdrop (matching .global-search-overlay) and update all JS toggle calls to use flex instead of block Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Bundle Size Report 📦
Bundle Analysis ReportsThe detailed bundle analysis reports are available in the workflow artifacts:
Download the artifacts from the workflow run to view interactive visualizations. Bundle size tracking is now active! This helps prevent bundle bloat. |
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
1 participant
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.
Please fill in this template.
What & Why
The global-search command palette has a polished overlay effect — a semi-transparent dark backdrop with a
backdrop-filter: blur(4px)that dims and blurs the app content behind it. None of the BrowserWindow-backed modals had this treatment, making them feel visually inconsistent.This PR copies that background styling to all modal windows so they share the same atmospheric appearance.
Approach
Since modal windows are already
transparent: truewithbackgroundColor: "#00000000", the simplest approach was to apply the overlay background directly to thehtml, bodystyle injected bymodalWindowManager.composeDocumentHtml():This means every modal window — regardless of its content — automatically inherits the backdrop effect through Electron's transparent window compositing. Modal window sizing and panel layout are completely unchanged.
Files changed
src/main/managers/modalWindowManager.ts— addsbackgroundandbackdrop-filterto the sharedbodystyle incomposeDocumentHtml; all other window management logic is untouchedview.tsfiles orsharedStyles.ts