fix(VAppBar/VToolbar): use max-width to avoid overflow

when using the **app** and **absolute** prop on v-app-bar and a v-navigation-drawer, the bar would overflow fixes #8364
vuetifyjs · Aug 14, 2019 · 9cc7546 · 9cc7546
1 parent b03e8f6
commit 9cc7546
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 2 deletions.
diff --git a/packages/vuetify/src/components/VToolbar/VToolbar.sass b/packages/vuetify/src/components/VToolbar/VToolbar.sass
@@ -5,6 +5,7 @@
 .v-toolbar
   contain: layout
   flex: 1 1 auto
+  max-width: 100%
   // Needs increased specificity
   &.v-sheet
     transition: $toolbar-transition
@@ -97,7 +98,6 @@
 .v-toolbar.v-toolbar--absolute
   position: absolute
   top: 0
-  width: 100%
   z-index: 1
 
 .v-toolbar.v-toolbar--bottom
@@ -110,7 +110,7 @@
 
 .v-toolbar.v-toolbar--collapsed
   border-bottom-right-radius: 24px
-  width: 112px
+  max-width: 112px
 
   .v-toolbar__title,
   .v-toolbar__extension

diff --git a/packages/vuetify/src/components/VToolbar/_variables.scss b/packages/vuetify/src/components/VToolbar/_variables.scss
@@ -7,4 +7,5 @@ $toolbar-transition: 0.2s map-get($transition, 'fast-out-slow-in') transform,
                      0.2s map-get($transition, 'fast-out-slow-in') left,
                      0.2s map-get($transition, 'fast-out-slow-in') right,
                      280ms map-get($transition, 'fast-out-slow-in') box-shadow,
+                     0.25s map-get($transition, 'fast-out-slow-in') max-width,
                      0.25s map-get($transition, 'fast-out-slow-in') width !default;