padding and margin changes to make www project page layout work without hacks; hack to position monitors correctly

src/components/gui/gui.css

@@ -186,6 +186,9 @@
     */
     display: flex;
     flex-direction: column;
+    /* pad entire wrapper to the left and right; allow children to fill width */
+    padding-left: $space;
+    padding-right: $space;
 }
 
 .stage-and-target-wrapper.large {
@@ -209,9 +212,6 @@
     flex-basis: 0;
 
     padding-top: $space;
-    padding-left: $space;
-    padding-right: $space;
-
     min-height: 0; /* this makes it work in Firefox */
 
     /*

src/components/stage-header/stage-header.css

@@ -22,7 +22,8 @@
     flex-shrink: 0;
     align-items: center;
     height: $stage-menu-height;
-    padding: $space;
+    padding-top: $space;
+    padding-bottom: $space;
 }
 
 .stage-size-row {

src/components/stage-wrapper/stage-wrapper.css

@@ -6,9 +6,6 @@
 }
 
 .stage-canvas-wrapper {
-    padding-left: $space;
-    padding-right: $space;
-
     /* Hides negative space between edge of rounded corners + container, when selected */
     user-select: none;
 }

src/components/stage/stage.css

@@ -11,7 +11,7 @@
 
     /* Attach border radius directly to canvas to prevent needing overflow:hidden; */
     border-radius: $space;
-    border: 1px solid $ui-black-transparent;
+    border: $stage-standard-border-width solid $ui-black-transparent;
 
     /* @todo: This is for overriding the value being set somewhere. Where is it being set? */
     background-color: transparent;
@@ -51,15 +51,17 @@
     bottom: 0;
     z-index: $z-index-stage-wrapper-overlay;
     background-color: $ui-white;
+    /* spacing between stage and control bar (on the top), or between
+    stage and window edges (on left/right/bottom) */
+    padding: $stage-full-screen-stage-padding;
 }
 
+/* wraps only main content of overlay player, not monitors */
 .stage-overlay-content {
     outline: none;
     margin: auto;
-    border: 3px solid rgb(126, 133, 151);
+    border: $stage-full-screen-border-width solid rgb(126, 133, 151);
     padding: 0;
-    margin-top: 3px;
-    margin-bottom: 3px;
     border-radius: $space;
 
     overflow: hidden;
@@ -76,6 +78,21 @@
     position: absolute;
 }
 
+/* adjust monitors when stage is standard size:
+shift them down and right to compensate for the stage's border */
+.stage-wrapper .monitor-wrapper {
+    top: $stage-standard-border-width;
+    left: $stage-standard-border-width;
+}
+
+/* adjust monitors when stage is full screen:
+.stage-wrapper-overlay uses position: fixed instead of relative, so we need
+to adjust for the border using a different method */
+.stage-wrapper-overlay .monitor-wrapper {
+    padding-top: calc($stage-full-screen-stage-padding + $stage-full-screen-border-width);
+    padding-bottom: calc($stage-full-screen-stage-padding + $stage-full-screen-border-width);
+}
+
 .monitor-wrapper, .color-picker-wrapper, .queston-wrapper {
     position: absolute;
     top: 0;

src/css/units.css

@@ -1,3 +1,6 @@
+/* make sure to keep these in sync with other constants,
+e.g. STAGE_DIMENSION_DEFAULTS in lib/screen-utils.js */
+
 $space: 0.5rem;
 
 $sprites-per-row: 5;
@@ -9,6 +12,10 @@ $stage-menu-height: 2.75rem;
 $library-header-height: 3.125rem;
 $library-filter-bar-height: 2.5rem;
 
+$stage-standard-border-width: 0.0625rem;
+$stage-full-screen-border-width: 0.1875rem;
+$stage-full-screen-stage-padding: 0.1875rem;
+
 $form-radius: calc($space / 2);
 
 /* layout contants from `layout-constants.js` */

src/lib/screen-utils.js

@@ -10,8 +10,13 @@ import layout, {STAGE_DISPLAY_SCALES, STAGE_SIZE_MODES, STAGE_DISPLAY_SIZES} fro
  */
 
 const STAGE_DIMENSION_DEFAULTS = {
-    spacingBorderAdjustment: 9,
-    menuHeightAdjustment: 40
+    // referencing css/units.css,
+    // spacingBorderAdjustment = 2 * $full-screen-top-bottom-margin +
+    //   2 * $full-screen-border-width
+    fullScreenSpacingBorderAdjustment: 12,
+    // referencing css/units.css,
+    // menuHeightAdjustment = $stage-menu-height
+    menuHeightAdjustment: 44
 };
 
 /**
@@ -48,7 +53,7 @@ const getStageDimensions = (stageSize, isFullScreen) => {
     if (isFullScreen) {
         stageDimensions.height = window.innerHeight -
             STAGE_DIMENSION_DEFAULTS.menuHeightAdjustment -
-            STAGE_DIMENSION_DEFAULTS.spacingBorderAdjustment;
+            STAGE_DIMENSION_DEFAULTS.fullScreenSpacingBorderAdjustment;
 
         stageDimensions.width = stageDimensions.height + (stageDimensions.height / 3);