fix: Update re-resizable dependency and fix stacking order issue (#374

)
seek-oss · Nov 6, 2024 · dbf3310 · dbf3310
1 parent 8cc6f07
commit dbf3310
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 5 deletions.
diff --git a/.changeset/green-bikes-doubt.md b/.changeset/green-bikes-doubt.md
@@ -0,0 +1,7 @@
+---
+'playroom': patch
+---
+
+Update `re-resizable` dependency.
+
+Fix issue where resizable handles were stacked below the editor panel and could not be selected.
diff --git a/package.json b/package.json
@@ -106,7 +106,7 @@
     "portfinder": "^1.0.32",
     "prettier": "^2.8.1",
     "prop-types": "^15.8.1",
-    "re-resizable": "^6.9.9",
+    "re-resizable": "^6.10.0",
     "react-docgen-typescript": "^2.2.2",
     "react-helmet": "^6.1.0",
     "react-transition-group": "^4.4.5",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/Playroom/Playroom.tsx b/src/Playroom/Playroom.tsx
@@ -163,6 +163,16 @@ export default ({ components, themes, widths, snippets }: PlayroomProps) => {
           updateEditorSize({ isVerticalEditor, offsetWidth, offsetHeight });
         }}
         enable={resizableConfig(editorPosition)}
+        /*
+         * Ensures resizable handles are stacked above the `codeEditor` component.
+         * By default, handles are stacked below the editor as introduced in:
+         * https://github.com/bokuweb/re-resizable/pull/827
+         */
+        handleStyles={
+          editorPosition === 'bottom'
+            ? { top: { zIndex: 1 } }
+            : { left: { zIndex: 1 } }
+        }
       >
         {codeEditor}
       </Resizable>