Merge pull request #15795 from overleaf/td-ide-page-prevent-collapsed-panel-resize

Prevent collapsed panel resize in React IDE page

GitOrigin-RevId: 3b60d924280472e4dd66f403779b937a4428b1b5

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

@@ -89,20 +89,18 @@ export default function EditorAndPdf({
           </div>
         ) : null}
       </HorizontalResizeHandle>
-      {pdfIsOpen || resizing ? (
-        <Panel
-          ref={pdfPanelRef}
-          id="pdf"
-          order={2}
-          defaultSize={50}
-          minSize={5}
-          collapsible
-          onCollapse={collapsed => setPdfIsOpen(!collapsed)}
-          className="ide-react-panel"
-        >
-          <PdfPreview />
-        </Panel>
-      ) : null}
+      <Panel
+        ref={pdfPanelRef}
+        id="pdf"
+        order={2}
+        defaultSize={50}
+        minSize={5}
+        collapsible
+        onCollapse={collapsed => setPdfIsOpen(!collapsed)}
+        className="ide-react-panel"
+      >
+        {pdfIsOpen || resizing ? <PdfPreview /> : null}
+      </Panel>
     </PanelGroup>
   )
 }

services/web/frontend/js/features/ide-react/components/resize/horizontal-resize-handle.tsx

@@ -15,6 +15,12 @@ export const HorizontalResizeHandle: FC<
   const { t } = useTranslation()
   const [isDragging, setIsDragging] = useState(false)
 
+  function handleDragging(isDraggingParam: boolean) {
+    if (isDragging || resizable) {
+      setIsDragging(isDraggingParam)
+    }
+  }
+
   // Only call onDragging prop when the pointer moves after starting a drag
   useEffect(() => {
     if (isDragging) {
@@ -35,7 +41,7 @@ export const HorizontalResizeHandle: FC<
     <PanelResizeHandle
       disabled={!resizable && !isDragging}
       {...props}
-      onDragging={setIsDragging}
+      onDragging={handleDragging}
     >
       <div
         className={classNames('horizontal-resize-handle', {