fix: dragging over an iframe stops

maltoze · Aug 2, 2023 · 458d64f · 458d64f · maltoze · Aug 2, 2023
1 parent 09ae61e
commit 458d64f
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 2 deletions.
diff --git a/src/content/App.tsx b/src/content/App.tsx
@@ -80,9 +80,9 @@ export default function App({ open, url, title, loading }: Props) {
       <AnimatePresence>
         {open.value && url.value && (
           <Draggable handle="[data-drag-region]" cancel="button">
-            <div className="fixed z-[2147483647] flex top-10 bottom-10 right-20 left-20 lg:right-48 lg:left-48 xl:right-64 xl:left-64">
+            <div className="fixed z-[2147483646] flex top-10 bottom-10 right-20 left-20 lg:right-48 lg:left-48 xl:right-64 xl:left-64">
               <motion.div
-                className="shadow-xl"
+                className="shadow-xl relative"
                 ref={containerRef}
                 animate="open"
                 exit="closed"
@@ -123,6 +123,7 @@ export default function App({ open, url, title, loading }: Props) {
                     </button>
                   </div>
                 </div>
+                <div className="draggable-iframe-cover" />
                 <iframe
                   ref={iframeRef}
                   src={url.value}

diff --git a/src/styles/global.css b/src/styles/global.css
@@ -10,4 +10,18 @@
   .kbd {
     @apply inline-block rounded border px-1 py-0.5 leading-none;
   }
+
+  .react-draggable-dragging .draggable-iframe-cover {
+    display: block;
+    z-index: 2147483647;
+  }
+
+  .draggable-iframe-cover {
+    position: absolute;
+    display: none;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  }
 }