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,7 +89,6 @@ export default function EditorAndPdf({
           </div>
         ) : null}
       </HorizontalResizeHandle>
-      {pdfIsOpen || resizing ? (
       <Panel
         ref={pdfPanelRef}
         id="pdf"
@@ -100,9 +99,8 @@ export default function EditorAndPdf({
         onCollapse={collapsed => setPdfIsOpen(!collapsed)}
         className="ide-react-panel"
       >
-          <PdfPreview />
+        {pdfIsOpen || resizing ? <PdfPreview /> : null}
       </Panel>
-      ) : null}
     </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', {