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

resources/css/components/fieldtypes/bard.css

@@ -255,7 +255,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

@@ -359,3 +359,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,
+    };
+}

resources/js/pages/PublishForm.vue

@@ -18,7 +18,7 @@ const props = defineProps({
 <template>
     <Head :title />
 
-    <div :class="{ 'max-w-5xl mx-auto': asConfig }">
+    <div :class="{ 'max-w-page mx-auto': asConfig }">
         <PublishForm
             :icon
             :title

resources/js/pages/addons/Index.vue

@@ -28,7 +28,7 @@ onMounted(() => {
 <template>
     <Head :title="__('Addons')" />
 
-    <div class="max-w-5xl mx-auto">
+    <div class="max-w-5xl 3xl:max-w-6xl mx-auto" data-max-width-wrapper>
         <Header :title="__('Addons')" icon="addons">
             <CommandPaletteItem
                 category="Actions"

resources/js/pages/blueprints/Edit.vue

@@ -17,7 +17,7 @@ defineProps({
 <template>
     <Head :title="__('Edit Blueprint')" />
 
-    <div class="max-w-5xl mx-auto">
+    <div class="max-w-5xl 3xl:max-w-5xl 3xl:max-w-6xl mx-auto" data-max-width-wrapper>
         <blueprint-builder
             :show-title="showTitle"
             :action="action"

resources/js/pages/blueprints/Index.vue

@@ -12,7 +12,7 @@ const resetters = ref({});
 <template>
     <Head :title="__('Blueprints')" />
 
-    <div class="max-w-5xl mx-auto">
+    <div class="max-w-5xl 3xl:max-w-6xl mx-auto" data-max-width-wrapper>
         <Header :title="__('Blueprints')" icon="blueprints">
             <Dropdown align="end">
                 <template #trigger>

resources/js/pages/blueprints/ScopedIndex.vue

@@ -47,7 +47,7 @@ const reloadPage = () => router.reload();
 <template>
     <Head :title="__('Blueprints')" />
 
-    <div class="max-w-5xl mx-auto">
+    <div class="max-w-page mx-auto">
         <Header :title="__('Blueprints')" icon="blueprints">
             <Button v-if="reorderable" :disabled="!hasBeenReordered" @click="saveOrder">
                 {{ __('Save Order') }}

resources/js/pages/collections/Index.vue

@@ -18,34 +18,32 @@ if (props.collections.length === 0) useArchitecturalBackground();
 <template>
     <Head :title="__('Collections')" />
 
-    <div class="max-w-5xl mx-auto">
-        <Listing
-            v-if="collections.length"
-            :initial-rows="collections"
-            :initial-columns="columns"
-            :can-create-collections="canCreate"
-            :create-url="createUrl"
-            :action-url="actionUrl"
-        />
+    <Listing
+        v-if="collections.length"
+        :initial-rows="collections"
+        :initial-columns="columns"
+        :can-create-collections="canCreate"
+        :create-url="createUrl"
+        :action-url="actionUrl"
+    />
 
-        <template v-else>
-            <header class="py-8 pt-16 text-center">
-                <h1 class="text-[25px] font-medium antialiased flex justify-center items-center gap-2 sm:gap-3">
-                    <Icon name="collections" class="size-5 text-gray-500" />
-                    {{ __('Collections') }}
-                </h1>
-            </header>
+    <template v-else>
+        <header class="py-8 pt-16 text-center">
+            <h1 class="text-[25px] font-medium antialiased flex justify-center items-center gap-2 sm:gap-3">
+                <Icon name="collections" class="size-5 text-gray-500" />
+                {{ __('Collections') }}
+            </h1>
+        </header>
 
-            <EmptyStateMenu :heading="__('statamic::messages.collection_configure_intro')">
-                <EmptyStateItem
-                    :href="createUrl"
-                    icon="collections"
-                    :heading="__('Create Collection')"
-                    :description="__('Get started by creating your first collection.')"
-                />
-            </EmptyStateMenu>
-        </template>
+        <EmptyStateMenu :heading="__('statamic::messages.collection_configure_intro')">
+            <EmptyStateItem
+                :href="createUrl"
+                icon="collections"
+                :heading="__('Create Collection')"
+                :description="__('Get started by creating your first collection.')"
+            />
+        </EmptyStateMenu>
+    </template>
 
-        <DocsCallout :topic="__('Collections')" url="collections" />
-    </div>
+    <DocsCallout :topic="__('Collections')" url="collections" />
 </template>

resources/js/pages/fieldsets/Edit.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="max-w-5xl mx-auto">
+    <div class="max-w-5xl 3xl:max-w-6xl mx-auto" data-max-width-wrapper>
         <Head :title="__('Edit Fieldset')" />
 
         <Header :title="__('Edit Fieldset')" icon="fieldsets">

resources/js/pages/fieldsets/Index.vue

@@ -23,7 +23,7 @@ const reloadPage = () => router.reload();
 <template>
     <Head :title="__('Fieldsets')" />
 
-    <div class="max-w-5xl mx-auto">
+    <div class="max-w-5xl 3xl:max-w-6xl mx-auto" data-max-width-wrapper>
         <Header :title="__('Fieldsets')" icon="fieldsets">
             <CommandPaletteItem
                 category="Actions"

resources/js/pages/forms/Index.vue

@@ -23,7 +23,7 @@ const reloadPage = () => router.reload();
 <template>
     <Head :title="__('Forms')" />
 
-    <div class="max-w-5xl mx-auto">
+    <div class="max-w-page mx-auto">
         <template v-if="isEmpty">
             <header class="py-8 pt-16 text-center">
                 <h1 class="text-[25px] font-medium antialiased flex justify-center items-center gap-2 sm:gap-3">