Merge pull request #15617 from overleaf/td-ide-page-show-pdf-divider

React IDE page: show PDF divider when PDF collapsed

GitOrigin-RevId: f535433a9f9c7683ae4144556a810247cda0f608

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

@@ -60,8 +60,7 @@ export default function EditorAndPdf({
           {editorContent}
         </Panel>
       ) : null}
-      {isDualPane ? (
-        <HorizontalResizeHandle>
+      <HorizontalResizeHandle resizable={isDualPane}>
         <HorizontalToggler
           id="editor-pdf"
           togglerType="east"
@@ -70,11 +69,12 @@ export default function EditorAndPdf({
           tooltipWhenOpen={t('tooltip_hide_pdf')}
           tooltipWhenClosed={t('tooltip_show_pdf')}
         />
+        {isDualPane ? (
           <div className="synctex-controls">
             <DefaultSynctexControl />
           </div>
-        </HorizontalResizeHandle>
         ) : null}
+      </HorizontalResizeHandle>
       {pdfIsOpen ? (
         <Panel
           ref={pdfPanelRef}

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

@@ -2,16 +2,21 @@ import { PanelResizeHandle } from 'react-resizable-panels'
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import { PanelResizeHandleProps } from 'react-resizable-panels/dist/declarations/src/PanelResizeHandle'
+import classNames from 'classnames'
 
-export const HorizontalResizeHandle: FC<PanelResizeHandleProps> = ({
-  children,
-  ...props
-}) => {
+export const HorizontalResizeHandle: FC<
+  { resizable?: boolean } & PanelResizeHandleProps
+> = ({ children, resizable = true, ...props }) => {
   const { t } = useTranslation()
 
   return (
     <PanelResizeHandle {...props}>
-      <div className="horizontal-resize-handle" title={t('resize')}>
+      <div
+        className={classNames('horizontal-resize-handle', {
+          'horizontal-resize-handle-enabled': resizable,
+        })}
+        title={t('resize')}
+      >
         {children}
       </div>
     </PanelResizeHandle>

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

@@ -55,6 +55,7 @@
     border-width: 0;
   }
 
+  &.horizontal-resize-handle-enabled {
     &::before,
     &::after {
       // This SVG has the colour hard-coded to the current value of @ol-blue-gray-2, so if we changed @ol-blue-gray-2,
@@ -73,6 +74,11 @@
     &::after {
       top: 75%;
     }
+  }
+
+  &:not(.horizontal-resize-handle-enabled) {
+    cursor: default;
+  }
 
   .synctex-controls {
     left: -8px;