Merge pull request #23915 from overleaf/dp-resizing

Blank out pdf and editor windows when resizing rail

GitOrigin-RevId: 0fc93e068541bc6110fe20339c49355f98d2cd7a

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

@@ -10,9 +10,11 @@ import { usePdfPane } from '@/features/ide-react/hooks/use-pdf-pane'
 import { useLayoutContext } from '@/shared/context/layout-context'
 import { useState } from 'react'
 import EditorPanel from './editor-panel'
+import { useRailContext } from '../contexts/rail-context'
 
 export default function MainLayout() {
   const [resizing, setResizing] = useState(false)
+  const { resizing: railResizing } = useRailContext()
   const {
     togglePdfPane,
     handlePdfPaneExpand,
@@ -36,7 +38,7 @@ export default function MainLayout() {
           autoSaveId="ide-redesign-outer-layout"
           direction="horizontal"
           className={classNames('ide-redesign-inner', {
-            'ide-panel-group-resizing': resizing,
+            'ide-panel-group-resizing': resizing || railResizing,
           })}
         >
           <RailLayout />
@@ -44,7 +46,6 @@ export default function MainLayout() {
             id="ide-redesign-editor-panel"
             order={1}
             className={classNames({
-              'ide-panel-group-resizing': resizing,
               hidden: !editorIsOpen,
             })}
             minSize={5}

services/web/frontend/js/features/ide-redesign/components/rail.tsx

@@ -75,6 +75,7 @@ export const RailLayout = () => {
     handlePaneCollapse,
     handlePaneExpand,
     togglePane,
+    setResizing,
   } = useRailContext()
 
   const { setLeftMenuShown } = useLayoutContext()
@@ -156,6 +157,7 @@ export const RailLayout = () => {
         resizable
         hitAreaMargins={{ coarse: 0, fine: 0 }}
         onDoubleClick={togglePane}
+        onDragging={setResizing}
       >
         <HorizontalToggler
           id="ide-redesign-sidebar-panel"