[6.x] Max width control for the CP (Expand/Constrain Layout) (#13647)

* Draft an alert component

* Fix icons

* Alert - improve markup

* Alert - tweak alignment

* Alert - message styling

* Alert - Style code snippets

* Alert / Style code snippets - remove unnecessary borders

* Alert / Style code snippets - fix dark mode legibility

* Alert / Style code snippets - improve

* Dashboard demo

* Move the demo to the playground

* Improve realism of demo messages

* Add alert component to the test's expected exports list

* Add Alert to the package export file

* Alert - make code size smaller

* Alert - add storybook component

* Add some rich content examples

* Fix icon

* Add docs

* Add instruction

* Simplify the Alert component to use Vue's slot fallback syntax

* Alerts should work with the Heading and Description components

* Add some demos

* Tweak variations

* Finish documenting using Alerts with Heading/Description components

* heading prop and use heading/description components

* Fix color inconsistencies

* Fix color inconsistencies

* Fix dark icon colors

* Dark mode fix

* Fix inconsistency

* Try a new max-width

* Replace all max-width-5xl with new max-width-page

* Max width toggle prototype

* Make the icons match more

* Hide the toggle width button for smaller screens; it's just noise and doesn't do anything meaningful at that width

* Add a tooltip instead of a title

* Change phrasing

* Improve phrasing

* Improve phrasing

* Fix /cp/collections not responding to the layout toggle control

* Make the layout-width button pulse when it appears

* Reduce max-width-page slightly

* Use a different approach - wip

* Revert "Use a different approach - wip"

This reverts commit 8e3f94d.

* Get this bad boy working

* Add max-w-5xl (maybe?) around lots of things

* Switch to a data-attribute to better separate tailwind classes with custom objects we're using

* Try a max width of 6xl for narrower pages

* Tidy - Add a few comments

* irrelevant

* Tweak layout expand icon animation slightly

* Tweak layout expand icon animation slightly

* Dynamic max width… Only switch to max-w-6xl on larger screens. On smaller screens max-w-6xl feels too wide, but on larger screens max-w-5xl feels to narrow

---------

Co-authored-by: Jason Varga <jason@pixelfear.com>
Co-authored-by: Jack McDade <jack@jackmcdade.com>

Author: 3 people

resources/css/components/fieldtypes/bard.css

@@ -262,7 +262,7 @@
         @apply fixed inset-0 min-h-screen overflow-scroll border-none rounded-none bg-gray-100 pt-14 dark:bg-gray-850;
 
         & > .bard-editor {
-            @apply relative mx-auto my-6 max-w-5xl rounded-lg bg-white px-8 shadow-ui-md dark:bg-gray-925 dark:shadow-lg;
+            @apply relative mx-auto my-6 max-w-page rounded-lg bg-white px-8 shadow-ui-md dark:bg-gray-925 dark:shadow-lg;
         }
         .bard-content {
             @apply dark:bg-gray-925;

resources/css/components/fieldtypes/markdown.css

@@ -110,7 +110,7 @@
     }
 
     .editor {
-        @apply relative mx-auto my-6 max-w-5xl rounded-lg bg-white dark:bg-gray-900! px-2 shadow-ui-md md:px-8 md:pt-8;
+        @apply relative mx-auto my-6 max-w-page rounded-lg bg-white dark:bg-gray-900! px-2 shadow-ui-md md:px-8 md:pt-8;
 
         .CodeMirror-scroll {
             @apply m-0;
@@ -126,6 +126,6 @@
     }
 
     .markdown-preview {
-        @apply relative mx-auto max-w-5xl bg-transparent p-8 text-lg;
+        @apply relative mx-auto max-w-page bg-transparent p-8 text-lg;
     }
 }

resources/css/core/utilities.css

@@ -379,3 +379,19 @@
 @utility shape-squircle {
     corner-shape: squircle;
 }
+
+/* UTILITIES / ANIMATIONS
+=================================================== */
+@keyframes pulse-on-appearance {
+    50% {
+        opacity: 0.85;
+        transform: scale(1.1);
+    }
+    100% {
+        transform: scale(1);
+    }
+}
+
+@utility animate-pulse-on-appearance {
+    animation: pulse-on-appearance 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
+}

resources/css/ui.css

@@ -156,6 +156,9 @@
 }
 
 @theme {
+    /* This is the outer width of the page content area. */
+    --max-width-page: 85rem;
+
     --text-4xs: 0.4rem;
     --text-3xs: 0.5rem;
     --text-2xs: 0.7rem;
@@ -166,6 +169,8 @@
     --breakpoint-xs: 30rem;
     --breakpoint-2xs: 20rem;
     --breakpoint-3xs: 15rem;
+    /* 1920px */
+    --breakpoint-3xl: 120rem;
 
     --shadow-ui-xs: 0px 1px 3px -1px rgba(0,0,0,0.10);
     --shadow-ui-sm: 0px 2px 3px -2px rgba(0,0,0,0.15);

resources/js/components/fieldtypes/replicator/SetPicker.vue

@@ -11,7 +11,7 @@
         :title="__('Add Set')"
         v-model:open="isOpen"
         v-else-if="shouldUseModal"
-        class="xl:max-w-3xl 2xl:max-w-5xl"
+        class="xl:max-w-3xl 2xl:max-w-page"
     >
         <template #trigger>
             <slot name="trigger" />

resources/js/components/global-header/Header.vue

@@ -1,10 +1,16 @@
 <script setup>
+import { inject } from 'vue';
+import { Icon } from '@ui';
 import Logo from './Logo.vue';
 import Breadcrumbs from './Breadcrumbs.vue';
 import SiteSelector from './SiteSelector.vue';
 import Search from './Search.vue';
 import ViewSiteButton from './ViewSiteButton.vue';
 import UserDropdown from './UserDropdown.vue';
+
+const layout = inject('layout', {});
+const isMaxWidthEnabled = layout.isMaxWidthEnabled;
+const toggleMaxWidth = layout.toggleMaxWidth;
 </script>
 
 <template>
@@ -27,6 +33,14 @@ import UserDropdown from './UserDropdown.vue';
             <div class="flex items-center">
                 <Search />
             </div>
+            <button
+                @click="toggleMaxWidth"
+                :aria-label="isMaxWidthEnabled ? __('Expand Layout') : __('Constrain Layout')"
+                v-tooltip="isMaxWidthEnabled ? __('Expand Layout') : __('Constrain Layout')"
+                class="hidden [@media(min-width:1800px)]:inline-flex items-center justify-center whitespace-nowrap shrink-0 font-medium antialiased cursor-pointer no-underline disabled:text-white/60 dark:disabled:text-white/50 disabled:cursor-not-allowed [&_svg]:shrink-0 [&_svg]:text-gray-925 [&_svg]:opacity-60 dark:[&_svg]:text-white bg-transparent hover:bg-gray-400/10 text-gray-900 dark:text-gray-300 dark:hover:bg-white/15 dark:hover:text-gray-200 h-8 text-[0.8125rem] leading-tight rounded-lg px-0 gap-0 w-8 [&_svg]:size-4 -me-2 [&_svg]:text-white/85! will-change-transform"
+            >
+                <Icon :name="isMaxWidthEnabled ? 'zoom-fit-screen' : 'fit-screen'" class="animate-pulse-on-appearance" />
+            </button>
             <ViewSiteButton />
             <UserDropdown />
         </div>

resources/js/components/roles/PublishForm.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="max-w-5xl mx-auto">
+    <div class="max-w-page mx-auto">
         <Header :title="__(initialTitle) || __('Create Role')" icon="permissions">
             <CommandPaletteItem
                 :category="$commandPalette.category.Actions"

resources/js/components/updater/Updater.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="max-w-5xl mx-auto">
+    <div class="max-w-page mx-auto">
         <ui-header :title="__('Updates')" icon="updates">
             <template v-if="!gettingChangelog" #actions>
                 <ui-badge :prepend="__('Statamic Version')" :text="currentVersion" color="green" size="lg" />

resources/js/components/user-groups/PublishForm.vue

@@ -39,7 +39,7 @@ function save() {
 </script>
 
 <template>
-    <div class="max-w-5xl mx-auto">
+    <div class="max-w-page mx-auto">
         <Header :title="__(title)" icon="groups">
             <Dropdown v-if="canEditBlueprint" class="me-2">
                 <template #trigger>

resources/js/composables/use-max-width-toggle.js

@@ -0,0 +1,22 @@
+import { ref, watch } from 'vue';
+
+const STORAGE_KEY = 'statamic.max-width-enabled';
+const isMaxWidthEnabled = ref(
+    localStorage.getItem(STORAGE_KEY) !== 'false' // Default to true
+);
+
+// Sync with localStorage
+watch(isMaxWidthEnabled, (value) => {
+    localStorage.setItem(STORAGE_KEY, value.toString());
+});
+
+export default function useMaxWidthToggle() {
+    const toggle = () => {
+        isMaxWidthEnabled.value = !isMaxWidthEnabled.value;
+    };
+
+    return {
+        isMaxWidthEnabled,
+        toggle,
+    };
+}