[web] Migrate Detached PDF page to BS5 (#20920)

* Update ide-react-detached.pug for BS5

* Place the Recompile button tooltip to the bottom when in Detached layout

GitOrigin-RevId: 02dd23d38314e40585a435095b05231c8edd6849

services/web/app/views/project/ide-react-detached.pug

@@ -8,6 +8,8 @@ block vars
 	- var suppressFooter = true
 	- var suppressSkipToContent = true
 	- var suppressCookieBanner = true
+	- bootstrap5PageStatus = 'enabled' // One of 'disabled', 'enabled', and 'queryStringOnly'
+	- bootstrap5PageSplitTest = 'bootstrap-5-ide'
 	- metadata.robotsNoindexNofollow = true
 
 block content

services/web/frontend/js/features/pdf-preview/components/pdf-compile-button.tsx

@@ -19,6 +19,7 @@ import {
 import OLButton from '@/features/ui/components/ol/ol-button'
 import OLButtonGroup from '@/features/ui/components/ol/ol-button-group'
 import { bsVersion } from '@/features/utils/bootstrap-5'
+import { useLayoutContext } from '@/shared/context/layout-context'
 
 const modifierKey = /Mac/i.test(navigator.platform) ? 'Cmd' : 'Ctrl'
 
@@ -56,6 +57,8 @@ function PdfCompileButton() {
 
   const { t } = useTranslation()
 
+  const { detachRole } = useLayoutContext()
+
   const fromScratchWithEvent = () => {
     eventTracking.sendMB('recompile-setting-changed', {
       setting: 'from-scratch',
@@ -97,7 +100,10 @@ function PdfCompileButton() {
               description: tooltipElement,
               id: 'compile',
               tooltipProps: { className: 'keyboard-tooltip' },
-              overlayProps: { delayShow: 500 },
+              overlayProps: {
+                delayShow: 500,
+                placement: detachRole === 'detached' ? 'bottom' : undefined,
+              },
             },
             icon: { type: 'refresh', spin: compiling },
             onClick: () => startCompile(),
@@ -206,7 +212,10 @@ function PdfCompileButton() {
             description={tooltipElement}
             id="compile"
             tooltipProps={{ className: 'keyboard-tooltip' }}
-            overlayProps={{ delay: { show: 500, hide: 0 } }}
+            overlayProps={{
+              delay: { show: 500, hide: 0 },
+              placement: detachRole === 'detached' ? 'bottom' : undefined,
+            }}
           >
             <OLButton
               variant="primary"