fix(VSnackbar): position based on app layout

closes #15744
vuetifyjs · Apr 21, 2024 · cbb945d · cbb945d
1 parent 0d0759c
commit cbb945d
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 1 deletion.
diff --git a/packages/vuetify/src/components/VSnackbar/VSnackbar.sass b/packages/vuetify/src/components/VSnackbar/VSnackbar.sass
@@ -7,6 +7,7 @@
   z-index: $snackbar-z-index
   margin: $snackbar-wrapper-margin
   margin-inline-end: calc(#{$snackbar-wrapper-margin} + var(--v-scrollbar-offset))
+  padding: var(--v-layout-top) var(--v-layout-right) var(--v-layout-bottom) var(--v-layout-left)
 
   &__wrapper
     align-items: center

diff --git a/packages/vuetify/src/components/VSnackbar/VSnackbar.tsx b/packages/vuetify/src/components/VSnackbar/VSnackbar.tsx
@@ -8,6 +8,7 @@ import { makeVOverlayProps } from '@/components/VOverlay/VOverlay'
 import { VProgressLinear } from '@/components/VProgressLinear'
 
 // Composables
+import { useLayout } from '@/composables'
 import { forwardRefs } from '@/composables/forwardRefs'
 import { makeLocationProps } from '@/composables/location'
 import { makePositionProps, usePosition } from '@/composables/position'
@@ -95,6 +96,7 @@ export const VSnackbar = genericComponent<VSnackbarSlots>()({
 
   setup (props, { slots }) {
     const isActive = useProxiedModel(props, 'modelValue')
+    const { mainStyles } = useLayout()
     const { positionClasses } = usePosition(props)
     const { scopeId } = useScopeId()
     const { themeClasses } = provideTheme(props)
@@ -172,7 +174,10 @@ export const VSnackbar = genericComponent<VSnackbarSlots>()({
             positionClasses.value,
             props.class,
           ]}
-          style={ props.style }
+          style={[
+            mainStyles.value,
+            props.style,
+          ]}
           { ...overlayProps }
           v-model={ isActive.value }
           contentProps={ mergeProps({