diff --git a/services/web/frontend/js/features/editor-navigation-toolbar/components/layout-dropdown-button.js b/services/web/frontend/js/features/editor-navigation-toolbar/components/layout-dropdown-button.js
index 9429c94d03..cc127e8caa 100644
--- a/services/web/frontend/js/features/editor-navigation-toolbar/components/layout-dropdown-button.js
+++ b/services/web/frontend/js/features/editor-navigation-toolbar/components/layout-dropdown-button.js
@@ -7,6 +7,7 @@ import IconChecked from '../../../shared/components/icon-checked'
 import ControlledDropdown from '../../../shared/components/controlled-dropdown'
 import IconEditorOnly from './icon-editor-only'
 import IconPdfOnly from './icon-pdf-only'
+import { useCompileContext } from '../../../shared/context/compile-context'
 import { useLayoutContext } from '../../../shared/context/layout-context'
 import * as eventTracking from '../../../infrastructure/event-tracking'
 
@@ -54,10 +55,13 @@ function LayoutDropdownButton() {
     pdfLayout,
   } = useLayoutContext(layoutContextPropTypes)
 
+  const { stopCompile } = useCompileContext()
+
   const handleDetach = useCallback(() => {
     detach()
+    stopCompile()
     eventTracking.sendMB('project-layout-detach')
-  }, [detach])
+  }, [detach, stopCompile])
 
   const handleReattach = useCallback(() => {
     if (detachRole !== 'detacher') {