Browse Source

bug(replays): Fix mouse-capture when sliding SplitPanel above an iframe (#44309)

Fixes an issue where the iframe intercepts mouse movement which makes it
hard to use the vertical/horizontal page resize grabbers.

Fixes #44314
Ryan Albrecht 2 years ago
parent
commit
67eb9ca3bb
1 changed files with 12 additions and 0 deletions
  1. 12 0
      static/app/views/replays/detail/layout/splitPanel.tsx

+ 12 - 0
static/app/views/replays/detail/layout/splitPanel.tsx

@@ -217,9 +217,11 @@ function SplitPanel(props: Props) {
           onMouseDown={handleMouseDown}
         />
         <Panel>{getValFromSide(b, 'content') || b}</Panel>
+        {isMousedown ? <HoverMouseDiv /> : null}
       </SplitPanelContainer>
     );
   }
+
   const {top: a, bottom: b} = props;
   return (
     <SplitPanelContainer
@@ -235,6 +237,7 @@ function SplitPanel(props: Props) {
         onMouseDown={handleMouseDown}
       />
       <Panel>{getValFromSide(b, 'content') || b}</Panel>
+      {isMousedown ? <HoverMouseDiv /> : null}
     </SplitPanelContainer>
   );
 }
@@ -246,6 +249,7 @@ const SplitPanelContainer = styled('div')<{
   width: 100%;
   height: 100%;
 
+  position: relative;
   display: grid;
   overflow: auto;
   grid-template-${p => p.orientation}:
@@ -258,6 +262,14 @@ const Panel = styled('div')`
   overflow: hidden;
 `;
 
+const HoverMouseDiv = styled('div')`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+`;
+
 type DividerProps = {isMousedown: boolean; slideDirection: 'leftright' | 'updown'};
 const Divider = styled(
   ({