[6.x] Apply existing container width breakpoints (#13910)

Author: daun

resources/js/pages/Dashboard.vue

@@ -20,9 +20,9 @@ function classes(widget) {
 
 function tailwindWidthClass(width) {
     const sizes = {
-        sm: 'w-full @2xl:w-1/2 @4xl:w-1/3 @8xl:w-1/4',
-        md: 'w-full @2xl:w-1/2 @4xl:w-1/2 @8xl:w-1/3',
-        lg: 'w-full @2xl:w-full @4xl:w-2/3 @8xl:w-3/4',
+        sm: 'w-full @2xl:w-1/2 @4xl:w-1/3 @7xl:w-1/4',
+        md: 'w-full @2xl:w-1/2 @4xl:w-1/2 @7xl:w-1/3',
+        lg: 'w-full @2xl:w-full @4xl:w-2/3 @7xl:w-3/4',
         full: 'w-full',
     };
 

src/Support/Str.php

@@ -258,9 +258,9 @@ public static function modifyMultiple($string, $modifications)
     public static function tailwindWidthClass($width)
     {
         $sizes = [
-            'sm' => 'w-full @lg:w-1/2 @4xl:w-1/3 @8xl:w-1/4',
-            'md' => 'w-full @lg:w-1/2 @4xl:w-1/2 @8xl:w-1/3',
-            'lg' => 'w-full @lg:w-full @4xl:w-2/3 @8xl:w-3/4',
+            'sm' => 'w-full @lg:w-1/2 @4xl:w-1/3 @7xl:w-1/4',
+            'md' => 'w-full @lg:w-1/2 @4xl:w-1/2 @7xl:w-1/3',
+            'lg' => 'w-full @lg:w-full @4xl:w-2/3 @7xl:w-3/4',
             'full' => 'w-full',
         ];
 

tests/Support/StrTest.php

@@ -190,13 +190,13 @@ public function it_modifies_strings_with_multiple_methods_at_once()
     #[Test]
     public function it_makes_tailwind_width_classes()
     {
-        $this->assertEquals('w-full @lg:w-1/2 @4xl:w-1/3 @8xl:w-1/4', Str::tailwindWidthClass(25));
-        $this->assertEquals('w-full @lg:w-1/2 @4xl:w-1/3 @8xl:w-1/4', Str::tailwindWidthClass(33));
-        $this->assertEquals('w-full @lg:w-1/2 @4xl:w-1/2 @8xl:w-1/3', Str::tailwindWidthClass(50));
-        $this->assertEquals('w-full @lg:w-1/2 @4xl:w-1/2 @8xl:w-1/3', Str::tailwindWidthClass(66));
-        $this->assertEquals('w-full @lg:w-full @4xl:w-2/3 @8xl:w-3/4', Str::tailwindWidthClass(75));
+        $this->assertEquals('w-full @lg:w-1/2 @4xl:w-1/3 @7xl:w-1/4', Str::tailwindWidthClass(25));
+        $this->assertEquals('w-full @lg:w-1/2 @4xl:w-1/3 @7xl:w-1/4', Str::tailwindWidthClass(33));
+        $this->assertEquals('w-full @lg:w-1/2 @4xl:w-1/2 @7xl:w-1/3', Str::tailwindWidthClass(50));
+        $this->assertEquals('w-full @lg:w-1/2 @4xl:w-1/2 @7xl:w-1/3', Str::tailwindWidthClass(66));
+        $this->assertEquals('w-full @lg:w-full @4xl:w-2/3 @7xl:w-3/4', Str::tailwindWidthClass(75));
         $this->assertEquals('w-full', Str::tailwindWidthClass(100));
-        $this->assertEquals('w-full @lg:w-1/2 @4xl:w-1/2 @8xl:w-1/3', Str::tailwindWidthClass('foo'));
+        $this->assertEquals('w-full @lg:w-1/2 @4xl:w-1/2 @7xl:w-1/3', Str::tailwindWidthClass('foo'));
     }
 
     #[Test]