diff --git a/src/extensionsIntegrated/Phoenix-live-preview/main.js b/src/extensionsIntegrated/Phoenix-live-preview/main.js index e1febb1c65..933cb12a17 100644 --- a/src/extensionsIntegrated/Phoenix-live-preview/main.js +++ b/src/extensionsIntegrated/Phoenix-live-preview/main.js @@ -343,8 +343,9 @@ define(function (require, exports, module) { * Does not hide in custom server mode (handled by _isMdviewrActive being false). */ function _updateLPControlsForMdviewer() { + const inDesignMode = WorkspaceManager.isInDesignMode && WorkspaceManager.isInDesignMode(); const showPen = !_isMdviewrActive; - const showChevron = !_isMdviewrActive; + const showChevron = !_isMdviewrActive && !inDesignMode; if ($previewBtn) { $previewBtn.toggle(showPen); } @@ -898,7 +899,7 @@ define(function (require, exports, module) { $designModeBtn.attr("title", on ? Strings.CCB_SWITCH_TO_CODE_EDITOR : Strings.CCB_SWITCH_TO_DESIGN_MODE); if ($modeBtn) { - $modeBtn.toggle(!_isMdviewrActive); + $modeBtn.toggle(!on && !_isMdviewrActive); } } $designModeBtn.click(()=>{ diff --git a/src/styles/phoenix-pro.less b/src/styles/phoenix-pro.less index b29661f786..2e9831f58f 100644 --- a/src/styles/phoenix-pro.less +++ b/src/styles/phoenix-pro.less @@ -229,10 +229,10 @@ transform: scale(1.25); } - /* ---- Info panel below the stage ---- */ .feature-info { position: relative; - height: 70px; + display: grid; + grid-template-areas: "stack"; background: @bc-panel-bg-alt; border-top: 1px solid @bc-panel-border; overflow: hidden; @@ -245,8 +245,10 @@ /* Mirror the .feature-slide transform/cross-fade so the text below the video animates in the same direction as the video stage. */ .feature-info-slide { - position: absolute; - inset: 0; + grid-area: stack; + display: flex; + flex-direction: column; + justify-content: center; padding: 10px 28px; opacity: 0; pointer-events: none;