fix: clicks not being passed to card children when in focus

Author: navinkarkera

src/library-authoring/LibraryBlock/LibraryBlock.tsx

@@ -60,7 +60,7 @@ export const LibraryBlock = ({
       frameBorder="0"
       loading="lazy"
       referrerPolicy="origin"
-      style={{ width: '100%', height: iframeHeight }}
+      style={{ width: '100%', height: iframeHeight, pointerEvents: 'auto' }}
       allow={IFRAME_FEATURE_POLICY}
       allowFullScreen
       scrolling={scrolling}

src/library-authoring/units/index.scss

@@ -8,9 +8,24 @@
 
   .pgn__card.clickable {
     box-shadow: none;
+    // this is required for clicks to be captured by card and iframe when it is not in focus
+    pointer-events: auto;
+    &:focus {
+      // this is required for clicks to be passed to underlying iframe component
+      pointer-events: none;
+    }
+  }
+
+  .pgn__action-row {
+    // this is required for clicks to be captured by card header
+    pointer-events: auto;
   }
 
   .pgn__card.clickable:hover {
     box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15), 0 0.125rem 0.5rem rgba(0, 0, 0, 0.15);
   }
+
+  .sortable-item-children {
+    pointer-events: auto;
+  }
 }