max width, anchors, labels (#5122)

* max width, anchors, labels

* cleanup

Author: stuartromanek

modules/@apostrophecms/i18n/i18n/en.json

@@ -267,7 +267,7 @@
   "lastUpdatedBy": "Last saved on {{ updatedAt }} <br /> by {{ updatedBy }}",
   "layout": "Layout",
   "layoutAlign": "Vertical alignment",
-  "layoutColumn": "Layout Column",
+  "layoutColumn": "Column",
   "layoutColumnEmptyArea": "Empty column. Click \"Edit Content\" to add widgets.",
   "layoutColumnTooSmall": "Too small to add column",
   "layoutJustify": "Horizontal alignment",
@@ -281,7 +281,7 @@
   "layoutBottom": "Bottom",
   "layoutTabletShow": "Visible on tablet",
   "layoutMobileShow": "Visible on mobile",
-  "layoutTogggleTooltip": "Use Content mode to edit your widgets and Layout mode to modify your columns",
+  "layoutTogggleTooltip": "Use Edit Content to edit widgets and Edit Columns to move or resize columns",
   "leavePageDescription": "The content you're trying to edit belongs to another document and must be edited there.\nChanges made to {{ oldTitle }} are saved automatically.",
   "leavePageHeading": "Leave {{ oldTitle }} to edit {{ newTitle }}?",
   "linkHrefHelp": "Write the full URL, beginning with https:// or http://",

modules/@apostrophecms/layout-widget/ui/apos/components/AposGridLayout.vue

@@ -2,7 +2,7 @@
   <div
     ref="root"
     class="apos-layout"
-    :style="rootCssVars"
+    :style="rootStyles"
   >
     <TransitionGroup
       ref="grid"
@@ -134,13 +134,27 @@ export default {
     'remove-item'
   ],
   data() {
+    const maxWidthMargin = 20;
     return {
       isResizing: false,
       isMoving: false,
       // Live preview from manager: patches to apply to items for render-only
       preview: {
         patches: null,
         key: null
+      },
+      maxWidthMargin,
+      maxWidth:
+        Math.max(
+          document.documentElement.clientWidth || 0,
+          window.innerWidth || 0
+        ) - (maxWidthMargin * 2),
+      maxWidthStyles: {
+        left: 'auto',
+        right: 'auto',
+        marginRight: 'auto',
+        marginLeft: 'auto',
+        boxSizing: 'border-box'
       }
     };
   },
@@ -154,14 +168,24 @@ export default {
         deviceMode: this.deviceMode
       });
     },
-    rootCssVars() {
+    rootStyles() {
+      let styles = {};
       // Escape quotes and backslashes for CSS content property
       const text = this.$t('apostrophe:layoutColumnEmptyArea')
         .replace(/\\/g, '\\\\')
         .replace(/'/g, '\\\'');
-      return {
-        '--empty-area-text': `'${text}'`
-      };
+
+      styles['--empty-area-text'] = `'${text}'`;
+
+      if (this.isManageMode) {
+        styles = {
+          ...styles,
+          ...this.maxWidthStyles,
+          maxWidth: `${this.maxWidth}px`
+        };
+      }
+
+      return styles;
     },
     syntheticItems() {
       if (!this.isManageMode) {
@@ -221,7 +245,18 @@ export default {
       };
     }
   },
+  mounted() {
+    window.addEventListener('resize', this.updateMaxWidth);
+  },
+  unmounted() {
+    window.removeEventListener('resize', this.updateMaxWidth);
+  },
   methods: {
+    updateMaxWidth() {
+      const vw =
+        Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
+      this.maxWidth = vw - this.maxWidthMargin * 2;
+    },
     onResizeStart() {
       this.isResizing = true;
       this.$emit('resize-start');

modules/@apostrophecms/layout-widget/ui/apos/components/AposGridManager.vue

@@ -920,6 +920,7 @@ export default {
 $resize-ui-width: 12px;
 $resize-ui-height: 32px;
 $resize-button-width: 4px;
+$resize-ui-z-index: 2;
 
 /* The base grid styles, mimicking the default public behavior */
 .apos-layout__item {
@@ -1164,8 +1165,8 @@ $resize-button-width: 4px;
     position: absolute;
     width: $anchor-size;
     height: $anchor-size;
-    outline: 1px solid var(--a-primary);
-    background-color: var(--a-primary-light-80);
+    outline: 1px solid var(--a-base-5);
+    background-color: var(--a-base-10);
     pointer-events: none;
   }
 
@@ -1243,6 +1244,7 @@ $resize-button-width: 4px;
 }
 
 .apos-layout__item-resize-handle-icon {
+  z-index: $resize-ui-z-index;
   pointer-events: none;
   position: absolute;
   top: 0;