diff --git a/src/bundle/Resources/public/js/scripts/admin.distraction.free.mode.js b/src/bundle/Resources/public/js/scripts/admin.distraction.free.mode.js index 99f0f0f147..ed89b18d43 100644 --- a/src/bundle/Resources/public/js/scripts/admin.distraction.free.mode.js +++ b/src/bundle/Resources/public/js/scripts/admin.distraction.free.mode.js @@ -1,5 +1,6 @@ (function (global, doc) { let activeFieldEdit = null; + let clearedPositionNodesData = []; const DISTRACTION_FREE_MODE_ENABLE_EVENT_NAME = 'ibexa-distraction-free:enable'; const DISTRACTION_FREE_DISABLE_EVENT_NAME = 'ibexa-distraction-free:disable'; const distractionFreeModeEnableBtns = doc.querySelectorAll('.ibexa-field-edit__distraction-free-mode-control-btn--enable'); @@ -16,6 +17,43 @@ activeFieldEdit.classList.toggle('ibexa-field-edit--distraction-free-mode-active', active); editorInstance.set('distractionFreeModeActive', active); + if (active) { + let parentElement = activeFieldEdit.parentNode; + + while (parentElement && parentElement !== doc.body) { + const { overflow, position } = getComputedStyle(parentElement); + + if (overflow !== 'visible' || position === 'absolute') { + clearedPositionNodesData.push({ + node: parentElement, + originalInlineOverflow: parentElement.style.overflow, + originalInlinePosition: parentElement.style.position, + }); + + parentElement.style.overflow = 'visible'; + parentElement.style.position = 'static'; + } + + parentElement = parentElement.parentNode; + } + } else { + clearedPositionNodesData.forEach(({ node, originalInlineOverflow, originalInlinePosition }) => { + if (originalInlineOverflow) { + node.style.overflow = originalInlineOverflow; + } else { + node.style.removeProperty('overflow'); + } + + if (originalInlinePosition) { + node.style.position = originalInlinePosition; + } else { + node.style.removeProperty('position'); + } + }); + + clearedPositionNodesData = []; + } + doc.body.dispatchEvent( new CustomEvent(dispatchEventName, { detail: {