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

[JayGeorge]

Description of the Problem

As described in #13610 some fields, especially with text, can feel unwieldy on larger screens, when the layout is full-width.

We made the container full-width for v6 after people requested it, and this is a consequence.

What this PR Does

• This PR allows users to toggle between an expanded layout and a constrained layout—constrained being the default.
• The control for toggling is in the top right, next to "visit site" and the user's avatar. You can see this in the screenshots below.
  • I think this is a good place because it's a personalisation
• The control is only visible at higher widths since otherwise it would have no discernible effect and might be confusing
• I've increased the widely used max-width-5xl to a consistent default, which I think is a good max-width—a little wider than v5 but not too utilitarian that it's distracting for writing
• Closes [6.x] Long Text width in Bard & Markdown #13610

Screenshots

The new consistent max-width, which is called max-w-page

Here's the new consistent max-width—slightly wider than before but still very usable

max-w-page for an entry

How to Reproduce

1. Expand the window to a width greater than 1800px to see the "Expand Layout" control in the top right, next to the search bar.
2. Click it to toggle between a constrained/expanded layout across the site.

---

Note

Introduces a controllable, consistent content width across the Control Panel with a user-toggleable constrained/expanded layout.

• Adds use-max-width-toggle composable with localStorage persistence; provided via layout and used in Layout.vue to conditionally apply max-w-page
• New header button (visible on very wide screens) to toggle layout; uses new icons zoom-fit-screen/fit-screen and animate-pulse-on-appearance
• Defines --max-width-page: 90rem and utility max-w-page; replaces prior max-w-5xl across pages/components (eg. publish forms, indexes, modals, Bard/Markdown fullscreen)
• Adds animation utilities (pulse-on-appearance) and minor modal width tweak in SetPicker
• Updates test/template markup to use max-w-page

^{Written by Cursor Bugbot for commit 388b0d3. This will update automatically on new commits. Configure here.}

[jasonvarga]

I like it!

However - this is subjective - But I think the new max width is too wide for most pages.

For publish forms when you're authoring content and there's a sidebar, sure. But for most other pages I think it might be too much.

Most other pages are listings of some sort. Unless there are a ton of columns, you end up with a comical amount of horizontal empty space.

Before:

After:

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{Bugbot Autofix is OFF. To automatically fix reported issues with Cloud Agents, enable Autofix in the Cursor dashboard.}

[cursor]

Max-width toggle ineffective for pages with own wrappers

Medium Severity

The layout max-width toggle in Layout.vue conditionally applies max-w-page based on isMaxWidthEnabled. However, most pages (like addons/Index.vue, blueprints/Edit.vue, forms/Index.vue, etc.) still have their own <div class="max-w-page mx-auto"> wrappers. When the toggle is off (expanded layout), these inner wrappers still constrain the content to 90rem, making the toggle ineffective. Only collections/Index.vue had its wrapper removed, so only that page actually responds to the toggle. Users clicking the toggle button will see no change on most pages.

Additional Locations (2)

• resources/js/pages/addons/Index.vue#L30-L31
• resources/js/pages/layout/Layout.vue#L40-L44

 

[JayGeorge]

I tweaked the animation to feel a bit smoother and more responsive.

FYI make sure you have devtools closed when you check these out on the branch—the animations are not as smooth with devtools open.

Before

After