fix: portal ProcessesTab's fullscreen log overlay out of glass-theme cards - #4262
Merged
Conversation
…cards (#4152) On "glass" themes the index.css rule that gives every bordered/rounded .bg-port-card a backdrop-filter also makes that card the containing block for position:fixed descendants. ProcessesTab renders its fullscreen log view as a hand-rolled `fixed inset-0` overlay inline in the app-detail / processes-page tab tree, so opening it from inside a themed card sized the overlay to the card instead of the viewport. Render it through createPortal to document.body — the same escape GalleryImagePicker and FolderPicker get via Modal's usePortal, and the same fix MediaLightbox took in #4151.
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.
Summary
On "glass" themes the
index.cssrule that gives every bordered/rounded.bg-port-cardabackdrop-filteralso makes that card the containing block forposition:fixeddescendants.ProcessesTabrenders its fullscreen log view as a hand-rolledfixed inset-0overlay inline in the app-detail / processes-page tab tree, so opening it from inside a themed card sized the overlay to the card instead of the viewport.Render the overlay through
createPortaltodocument.body— the same escapeGalleryImagePickerandFolderPickerget via<ui/Modal>'susePortal, and the same fixMediaLightboxtook in #4151. The overlay usesbg-port-bg(not abg-black/Nscrim), so it never tripped — and still doesn't trip — thea11yConventionshand-rolled-backdrop guard.Closes #4152
Test plan
cd client && npm test -- src/components/apps/tabs/ProcessesTab.test.jsx— 2 passed. New case asserts the fullscreen overlay renders outside the component's own container, directly under<body>, and is torn down on exit.createPortalwrapper fails the new test (it is a real guard, not a vacuous one); restored and re-verified green.cd client && npm test -- src/a11yConventions.test.js src/components/apps— 13 files / 136 tests passed.