Merge pull request #20272 from overleaf/revert-20268-revert-19885-mj-resizeable-panels

[web] Upgrade react-resizable-panels (2nd attempt)

GitOrigin-RevId: 643a90044dac0daf39245fa29267b16550fd6e69

package-lock.json

@@ -35221,9 +35221,9 @@
       }
     },
     "node_modules/react-resizable-panels": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/react-resizable-panels/-/react-resizable-panels-1.0.3.tgz",
-      "integrity": "sha512-d54mBF/T6S51ZAU7s8SjLMa9hnLIhBHi35GJkdzC+gsEOpm8IEQ5odJid1AWi8neGfGm2HDANGo8Ndc6C8ISdw==",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/react-resizable-panels/-/react-resizable-panels-2.1.1.tgz",
+      "integrity": "sha512-+cUV/yZBYfiBj+WJtpWDJ3NtR4zgDZfHt3+xtaETKE+FCvp+RK/NJxacDQKxMHgRUTSkfA6AnGljQ5QZNsCQoA==",
       "dev": true,
       "peerDependencies": {
         "react": "^16.14.0 || ^17.0.0 || ^18.0.0",
@@ -44848,7 +44848,7 @@
         "react-linkify": "^1.0.0-alpha",
         "react-overlays": "^0.9.3",
         "react-refresh": "^0.14.0",
-        "react-resizable-panels": "^1.0.3",
+        "react-resizable-panels": "^2.1.1",
         "resolve-url-loader": "^5.0.0",
         "samlp": "^7.0.2",
         "sandboxed-module": "overleaf/node-sandboxed-module#cafa2d60f17ce75cc023e6f296eb8de79d92d35d",
@@ -53468,7 +53468,7 @@
         "react-linkify": "^1.0.0-alpha",
         "react-overlays": "^0.9.3",
         "react-refresh": "^0.14.0",
-        "react-resizable-panels": "^1.0.3",
+        "react-resizable-panels": "^2.1.1",
         "recurly": "^4.0.0",
         "referer-parser": "github:overleaf/nodejs-referer-parser#8b8b103762d05b7be4cfa2f810e1d408be67d7bb",
         "request": "^2.88.2",
@@ -75662,9 +75662,9 @@
       "dev": true
     },
     "react-resizable-panels": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/react-resizable-panels/-/react-resizable-panels-1.0.3.tgz",
-      "integrity": "sha512-d54mBF/T6S51ZAU7s8SjLMa9hnLIhBHi35GJkdzC+gsEOpm8IEQ5odJid1AWi8neGfGm2HDANGo8Ndc6C8ISdw==",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/react-resizable-panels/-/react-resizable-panels-2.1.1.tgz",
+      "integrity": "sha512-+cUV/yZBYfiBj+WJtpWDJ3NtR4zgDZfHt3+xtaETKE+FCvp+RK/NJxacDQKxMHgRUTSkfA6AnGljQ5QZNsCQoA==",
       "dev": true,
       "requires": {}
     },

services/web/frontend/js/features/ide-react/components/editor-and-pdf.tsx

@@ -45,9 +45,9 @@ export const EditorAndPdf: FC = () => {
         hidden: view === 'history',
       })}
     >
-      {/* main */}
+      {/* ide */}
       <Panel
-        id="panel-main"
+        id="panel-ide"
         order={1}
         defaultSize={50}
         minSize={5}
@@ -73,6 +73,7 @@ export const EditorAndPdf: FC = () => {
         className={classNames({
           hidden: !editorIsOpen,
         })}
+        hitAreaMargins={{ coarse: 0, fine: 0 }}
       >
         <HorizontalToggler
           id="editor-pdf"

services/web/frontend/js/features/ide-react/components/layout/main-layout.tsx

@@ -71,6 +71,7 @@ export const MainLayout: FC = () => {
             onDoubleClick={toggleSidebar}
             resizable={sidebarIsOpen}
             onDragging={setSidebarResizing}
+            hitAreaMargins={{ coarse: 0, fine: 0 }}
           >
             <HorizontalToggler
               id="panel-sidebar"
@@ -93,6 +94,7 @@ export const MainLayout: FC = () => {
                 onDoubleClick={toggleChat}
                 resizable={chatIsOpen}
                 onDragging={setChatResizing}
+                hitAreaMargins={{ coarse: 0, fine: 0 }}
               />
 
               {/* chat */}

services/web/frontend/stylesheets/app/editor/ide-react.less

@@ -59,6 +59,8 @@
   .custom-toggler {
     padding: 0;
     border-width: 0;
+    // Override react-resizable-panels which sets a global * { cursor: ew-resize }
+    cursor: pointer !important;
   }
 
   &.horizontal-resize-handle-enabled {
@@ -91,6 +93,8 @@
     margin: 0;
     // Ensure that SyncTex controls appear in front of PDF viewer controls and logs pane
     z-index: 12;
+    // Override react-resizable-panels which sets a global * { cursor: ew-resize }
+    cursor: pointer !important;
   }
 }
 

services/web/package.json

@@ -343,7 +343,7 @@
     "react-linkify": "^1.0.0-alpha",
     "react-overlays": "^0.9.3",
     "react-refresh": "^0.14.0",
-    "react-resizable-panels": "^1.0.3",
+    "react-resizable-panels": "^2.1.1",
     "resolve-url-loader": "^5.0.0",
     "samlp": "^7.0.2",
     "sandboxed-module": "overleaf/node-sandboxed-module#cafa2d60f17ce75cc023e6f296eb8de79d92d35d",