From 22a8c7d5f29affa2220f4790852e71612dcd0181 Mon Sep 17 00:00:00 2001
From: Tim Down <158919+timdown@users.noreply.github.com>
Date: Fri, 17 Nov 2023 12:31:57 +0000
Subject: [PATCH] Merge pull request #15795 from
 overleaf/td-ide-page-prevent-collapsed-panel-resize

Prevent collapsed panel resize in React IDE page

GitOrigin-RevId: 3b60d924280472e4dd66f403779b937a4428b1b5
---
 .../ide-react/components/editor-and-pdf.tsx   | 26 +++++++++----------
 .../resize/horizontal-resize-handle.tsx       |  8 +++++-
 2 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/services/web/frontend/js/features/ide-react/components/editor-and-pdf.tsx b/services/web/frontend/js/features/ide-react/components/editor-and-pdf.tsx
index 34f0492861..eb3552105d 100644
--- a/services/web/frontend/js/features/ide-react/components/editor-and-pdf.tsx
+++ b/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>
   )
 }
diff --git a/services/web/frontend/js/features/ide-react/components/resize/horizontal-resize-handle.tsx b/services/web/frontend/js/features/ide-react/components/resize/horizontal-resize-handle.tsx
index 5834e444b7..ef68b216e9 100644
--- a/services/web/frontend/js/features/ide-react/components/resize/horizontal-resize-handle.tsx
+++ b/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', {