Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(app): allow navbar during LegacyModals on the modal portal (#15166)
In theory, the intent both from a programming and a design aspect of having the "modal portal root" - the portal component that lives inside the desktop app's route-component render node - was that modals registered to the modal portal instead of the top portal would occlude page content (i.e. the Devices page, a protocols page, whichever one that modal said it wanted) but _not_ occlude or inhibit interaction with the navbar or the breadcrumbs. However, because the Overlay component behind LegacyModal (which is the thing that renders the translucent occlusion of background content, and the thing that intercepts interaction) had `position: fixed`, it would always be positioned as-if its parent were the viewport, meaning that it would always occlude interaction with the entire app, even while centering the actual modal content on the page content. This is wrong. The solution is for Overlay to be `position: absolute`, which has most of the same semantics (also creates a z-order stack, allows `left:`, `right:`, `top:`, `bottom:`, etc) but has its positioning parent be its DOM parent, which in this case is the modal portal element, which means that - When a `LegacyModal` is instantiated via `createPortal` to the "top level portal root", it will occlude and intercept interaction to everything in the viewport (also previous behavior, correct) - When a `LegacyModal` is instantiated via `createPortal` to the "modal portal root", it will occlude and intercept interaction to the page content but not the navbar or breadcrumbs (new behavior, correct) - When a `LegacyModal` is instantiated via a normal component render tree, it will occlude and intercept interaction to whatever is below it in the component tree (new behavior, correct - previously this would also intercept and occlude the entire viewport) This is a lot of words for a small css change, but it affects a whole lot of things. ## Review and Testing Requests - There should be no change to modals that use the top root, let's smoke test this and check; that should include app update notifications and estop modals - We should smoke test the following modals, which use the modal portal and a `LegacyModal`: - [x] Confirm cancelling a run - [x] Robot update notifications
- Loading branch information