Merge pull request #28608 from overleaf/mj-fix-redesign-css-in-detached-pdf

[web] Use wrapping div for detached PDF when using redesigned editor

GitOrigin-RevId: f8f7b395dbe5a627804da10218f4de9d5ac76348

services/web/frontend/js/features/pdf-preview/components/pdf-preview-detached-root.tsx

@@ -2,6 +2,7 @@ import { createRoot } from 'react-dom/client'
 import PdfPreview from './pdf-preview'
 import useWaitForI18n from '../../../shared/hooks/use-wait-for-i18n'
 import { ReactContextRoot } from '@/features/ide-react/context/react-context-root'
+import { useIsNewEditorEnabled } from '@/features/ide-redesign/utils/new-editor-utils'
 
 function PdfPreviewDetachedRoot() {
   const { isReady } = useWaitForI18n()
@@ -12,11 +13,23 @@ function PdfPreviewDetachedRoot() {
 
   return (
     <ReactContextRoot>
-      <PdfPreview />
+      <EditorRedesignWrapper>
+        <PdfPreview />
+      </EditorRedesignWrapper>
     </ReactContextRoot>
   )
 }
 
+function EditorRedesignWrapper({ children }: { children: React.ReactNode }) {
+  const newEditorEnabled = useIsNewEditorEnabled()
+  if (!newEditorEnabled) {
+    return <>{children}</>
+  }
+
+  // TODO ide-redesign-cleanup: this wrapper should not be required
+  return <div className="ide-redesign-main">{children}</div>
+}
+
 export default PdfPreviewDetachedRoot // for testing
 
 const element = document.getElementById('pdf-preview-detached-root')