Skip to content

feat(display): reduce default breakpoint sizes#19759

Merged
KaelWD merged 6 commits intonextfrom
feat/update-default-breakpoints
Dec 4, 2025
Merged

feat(display): reduce default breakpoint sizes#19759
KaelWD merged 6 commits intonextfrom
feat/update-default-breakpoints

Conversation

@KaelWD
Copy link
Copy Markdown
Member

@KaelWD KaelWD commented May 6, 2024

https://m3.material.io/foundations/layout/applying-layout/window-size-classes

-55px for edge's stupid sidebar
reduced xxl to 4k at 175% scaling

@KaelWD KaelWD marked this pull request as ready for review November 6, 2025 08:44
@KaelWD KaelWD requested a review from a team November 6, 2025 08:44
@J-Sek
Copy link
Copy Markdown
Contributor

J-Sek commented Nov 6, 2025

I always though there is something off about those defaults.
Hopefully Google guidelines are backed by some real science.

My only concern is the impact on $container-max-widths:

  • md: 900 » 787.5
  • lg: 1200 » 1073.4375
  • xl: 1800 » 1448.4375
  • xxl: 2400 » 2004.375

With rounding down to nearest 100px we would get: 700, 1000, 1400, 2000

100 * math.floor(map.get($grid-breakpoints, 'md') * 0.009375)
// or with math.div() to make it more obvious:
// 100 * math.floor(math.div(map.get($grid-breakpoints, 'md') * 0.9375, 100))

@KaelWD
Copy link
Copy Markdown
Member Author

KaelWD commented Nov 7, 2025

My biggest problem with the current ones is that they exactly match common screen resolutions (especially xl and xxl). Any sort of sidebar like edge's or firefox vertical tabs bumps you down a breakpoint for no real reason.

$container-max-widths

Yeah that seems better actually. Many screen sizes will still get a wider container with that change eg. 1080p goes from 1200 to 1400px.

@KaelWD
Copy link
Copy Markdown
Member Author

KaelWD commented Nov 7, 2025

We could actually use container queries now, any thoughts on these questions? #18983 (comment)

@J-Sek
Copy link
Copy Markdown
Contributor

J-Sek commented Nov 7, 2025

sidebar like edge's or firefox vertical tabs bumps you down a breakpoint

I think that ~55px margin is going to be perfect to account for this.

@KaelWD KaelWD merged commit 853ce33 into next Dec 4, 2025
18 checks passed
@KaelWD KaelWD deleted the feat/update-default-breakpoints branch December 4, 2025 04:05
@donalmurtagh
Copy link
Copy Markdown
Contributor

donalmurtagh commented Jan 13, 2026

@KaelWD Does this change mean that a Vuetify v3 responsive application will potentially have to re-test and modify every page's layout?

Is there a way to revert to the v3 breakpoints, other than by overriding the $grid-breakpoints properties in _variables.scss?

@J-Sek
Copy link
Copy Markdown
Contributor

J-Sek commented Jan 13, 2026

Does this change mean that a Vuetify v3 responsive application will potentially have to re-test and modify every page's layout?

yes

Is there a way to revert to the v3 breakpoints, other than by overriding the $grid-breakpoints properties in _variables.scss?

If you are not using Sass, you would need to append custom CSS for .v-container, .hidden-*utilities + a bit more to patch VTabs and VBottomSheet.

@donalmurtagh
Copy link
Copy Markdown
Contributor

If you are not using Sass

@J-Sek If I am using Sass, is there an easier way to revert to the v3 behaviour?

@KaelWD
Copy link
Copy Markdown
Member Author

KaelWD commented Jan 14, 2026

I've added instructions to the upgrade guide with changes needed to keep the v3 values.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

E: display Display composable T: feature A new feature

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants