[6.x] Hide the expand layout control when the content is small and it has no effect (#13761)

* Hide the expand layout control when the content is equal to or smaller than the max-width wrapper, since the button would have no visible effect.

* Cover arbitrary max-width classes such as a blank dashboard page with a wizard.

Author: jaygeorge

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

@@ -38,6 +38,7 @@ const toggleMaxWidth = layout.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"
+                data-expand-layout-control
             >
                 <Icon :name="isMaxWidthEnabled ? 'zoom-fit-screen' : 'fit-screen'" class="animate-pulse-on-appearance" />
             </button>
@@ -46,3 +47,11 @@ const toggleMaxWidth = layout.toggleMaxWidth;
         </div>
     </header>
 </template>
+
+<style>
+    /* Hide the expand layout control when the content is equal to or smaller than the max-width wrapper, since the button would have no visible effect. */
+    /* [class*="max-["] covers arbitrary max-width classes such as a blank dashboard page with a wizard. */
+    body:has([data-max-width-wrapper] > :is(.max-w-page, .max-w-5xl, .max-w-4xl, .max-w-3xl, [class*="max-["])) [data-expand-layout-control] {
+        display: none;
+    }
+</style>