feat(display): reduce default breakpoint sizes (#19759)

KaelWD · web-flow · commit 853ce3341255 · 2025-12-04T15:05:46.000+11:00
diff --git a/packages/docs/src/components/features/BreakpointsTable.vue b/packages/docs/src/components/features/BreakpointsTable.vue
@@ -76,35 +76,35 @@
       device: 'small',
       code: 'sm',
       type: 'breakpoints-table.small-to-medium-tablet',
-      range: '600px > < 960px',
+      range: '600px > < 840px',
     },
     {
       icon: 'mdi-laptop',
       device: 'medium',
       code: 'md',
       type: 'breakpoints-table.large-tablet-to-laptop',
-      range: '960px > < 1280px',
+      range: '840px > < 1145px',
     },
     {
       icon: 'mdi-monitor-small',
       device: 'large',
       code: 'lg',
       type: 'breakpoints-table.desktop',
-      range: '1280px > < 1920px',
+      range: '1145px > < 1545px',
     },
     {
       icon: 'mdi-monitor',
       device: 'extra-large',
       code: 'xl',
       type: 'breakpoints-table.large-to-extra-large',
-      range: '1920px > < 2560px',
+      range: '1545px > < 2138px',
     },
     {
       icon: 'mdi-monitor-screenshot',
       device: 'extra-extra-large',
       code: 'xxl',
       type: 'breakpoints-table.extra-large-to-extra-extra-large',
-      range: '> 2560px',
+      range: '> 2138px',
     },
   ]
 
diff --git a/packages/docs/src/pages/en/features/display-and-platform.md b/packages/docs/src/pages/en/features/display-and-platform.md
@@ -148,19 +148,19 @@ In the following example, we use a switch statement and the current breakpoint n
 {
   // Breakpoints
   xs: boolean // 0 - 599
-  sm: boolean // 600 - 959
-  md: boolean // 960 - 1279
-  lg: boolean // 1280 - 1919
-  xl: boolean // > 1920
-  xxl: boolean
-  smAndDown: boolean // < 960
-  smAndUp: boolean // > 600
-  mdAndDown: boolean // < 1280
-  mdAndUp: boolean // > 960
-  lgAndDown: boolean // < 1919
-  lgAndUp: boolean // > 1280
-  xlAndDown: boolean
-  xlAndUp: boolean // < 1920
+  sm: boolean // 600 - 839
+  md: boolean // 840 - 1144
+  lg: boolean // 1145 - 1544
+  xl: boolean // 1545 - 2137
+  xxl: boolean // >= 2138
+  smAndDown: boolean // < 840
+  smAndUp: boolean // > 599
+  mdAndDown: boolean // < 1145
+  mdAndUp: boolean // > 839
+  lgAndDown: boolean // < 1545
+  lgAndUp: boolean // > 1144
+  xlAndDown: boolean // < 2138
+  xlAndUp: boolean // > 1544
 
   // true if screen width < mobileBreakpoint
   mobile: boolean
diff --git a/packages/vuetify/src/composables/__tests__/display.spec.browser.ts b/packages/vuetify/src/composables/__tests__/display.spec.browser.ts
@@ -186,15 +186,15 @@ describe('display', () => {
         description: 'WSXGA+ (landscape)',
         width: 1680,
         height: 1050,
-        name: 'lg',
+        name: 'xl',
       },
       [
-        'lg',
+        'xl',
         'smAndUp',
         'mdAndUp',
-        'lgAndDown',
         'lgAndUp',
         'xlAndDown',
+        'xlAndUp',
       ],
     ],
     [
diff --git a/packages/vuetify/src/composables/display.ts b/packages/vuetify/src/composables/display.ts
@@ -88,10 +88,10 @@ const defaultDisplayOptions: DisplayOptions = {
   thresholds: {
     xs: 0,
     sm: 600,
-    md: 960,
-    lg: 1280,
-    xl: 1920,
-    xxl: 2560,
+    md: 840,
+    lg: 1145,
+    xl: 1545,
+    xxl: 2138,
   },
 }
 
diff --git a/packages/vuetify/src/styles/settings/_variables.scss b/packages/vuetify/src/styles/settings/_variables.scss
@@ -125,10 +125,10 @@ $grid-breakpoints: map-deep-merge(
   (
     'xs': 0,
     'sm': 600px,
-    'md': 960px,
-    'lg': 1280px,
-    'xl': 1920px,
-    'xxl': 2560px,
+    'md': 840px,
+    'lg': 1145px,
+    'xl': 1545px,
+    'xxl': 2138px,
   ),
   $grid-breakpoints
 );
@@ -155,10 +155,10 @@ $container-max-widths: map-deep-merge(
   (
     'xs': null,
     'sm': null,
-    'md': map.get($grid-breakpoints, 'md') * 0.9375,
-    'lg': map.get($grid-breakpoints, 'lg') * 0.9375,
-    'xl': map.get($grid-breakpoints, 'xl') * 0.9375,
-    'xxl': map.get($grid-breakpoints, 'xxl') * 0.9375,
+    'md': 100 * math.floor(map.get($grid-breakpoints, 'md') * 0.009375),
+    'lg': 100 * math.floor(map.get($grid-breakpoints, 'lg') * 0.009375),
+    'xl': 100 * math.floor(map.get($grid-breakpoints, 'xl') * 0.009375),
+    'xxl': 100 * math.floor(map.get($grid-breakpoints, 'xxl') * 0.009375),
   ),
   $container-max-widths
 );
