diff --git a/src/components/stage-header/stage-header.jsx b/src/components/stage-header/stage-header.jsx
index 4059478cd92..a5490889314 100644
--- a/src/components/stage-header/stage-header.jsx
+++ b/src/components/stage-header/stage-header.jsx
@@ -10,7 +10,7 @@ import Button from '../button/button.jsx';
 import ToggleButtons from '../toggle-buttons/toggle-buttons.jsx';
 import Controls from '../../containers/controls.jsx';
 import {getStageDimensions} from '../../lib/screen-utils';
-import {STAGE_DISPLAY_SIZES, STAGE_SIZE_MODES} from '../../lib/layout-constants';
+import {STAGE_DISPLAY_SIZES, STAGE_SIZE_MODES, STAGE_DISPLAY_SCALE_METADATA, FIXED_WIDTH} from '../../lib/layout-constants';
 
 import fullScreenIcon from './icon--fullscreen.svg';
 import unFullScreenIcon from './icon--unfullscreen.svg';
@@ -195,7 +195,14 @@ const StageHeaderComponent = function (props) {
             <Box
                 className={styles.stageHeaderWrapper}
                 // + 2 px because the stage will have 2 pixels of border around it
-                style={{minWidth: `${stageDimensions.width + 2}px`}}
+                style={{minWidth: `${
+                    stageSize === STAGE_DISPLAY_SIZES.constrained
+                        ? STAGE_DISPLAY_SCALE_METADATA.constrained.scale * Math.max(stageDimensions.widthDefault, FIXED_WIDTH) + 2
+                        : (stageSizeMode === STAGE_SIZE_MODES.full || stageSizeMode === STAGE_SIZE_MODES.large) && stageDimensions.width <= FIXED_WIDTH
+                            ? FIXED_WIDTH + 2
+                            : stageDimensions.width + 2
+                    }px`
+                }}
             >
                 <Box className={styles.stageMenuWrapper}>
                     <Controls