feat(display): reduce default breakpoint sizes#19759
Conversation
e20cfec to
2766105
Compare
4c970f9 to
6a3285f
Compare
|
I always though there is something off about those defaults. My only concern is the impact on
With rounding down to nearest 100px we would get: 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)) |
|
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.
Yeah that seems better actually. Many screen sizes will still get a wider container with that change eg. 1080p goes from 1200 to 1400px. |
|
We could actually use container queries now, any thoughts on these questions? #18983 (comment) |
I think that ~55px margin is going to be perfect to account for this. |
|
@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 |
yes
If you are not using Sass, you would need to append custom CSS for |
@J-Sek If I am using Sass, is there an easier way to revert to the v3 behaviour? |
|
I've added instructions to the upgrade guide with changes needed to keep the v3 values. |
https://m3.material.io/foundations/layout/applying-layout/window-size-classes
-55px for edge's stupid sidebar
reduced xxl to 4k at 175% scaling