fix(VDialog): apply scrollable styles to card when wrapped in a form

vuetifyjs · Aug 3, 2023 · 2537945 · 2537945
1 parent 3d1b12d
commit 2537945
Showing 1 changed file with 41 additions and 35 deletions.
diff --git a/packages/vuetify/src/components/VDialog/VDialog.sass b/packages/vuetify/src/components/VDialog/VDialog.sass
@@ -15,29 +15,31 @@
     display: flex
     flex-direction: column
 
-    > .v-card,
-    > .v-sheet
-      --v-scrollbar-offset: 0px
-      border-radius: $dialog-border-radius
-      overflow-y: auto
+    &,
+    > form
+      > .v-card,
+      > .v-sheet
+        --v-scrollbar-offset: 0px
+        border-radius: $dialog-border-radius
+        overflow-y: auto
 
-      @include tools.elevation($dialog-elevation)
+        @include tools.elevation($dialog-elevation)
 
-    > .v-card
-      display: flex
-      flex-direction: column
+      > .v-card
+        display: flex
+        flex-direction: column
 
-      > .v-card-item
-        padding: $dialog-card-header-padding
+        > .v-card-item
+          padding: $dialog-card-header-padding
 
-        + .v-card-text
-          padding-top: $dialog-card-header-text-padding-top
+          + .v-card-text
+            padding-top: $dialog-card-header-text-padding-top
 
-      > .v-card-text
-        font-size: inherit
-        letter-spacing: $dialog-card-text-letter-spacing
-        line-height: inherit
-        padding: $dialog-card-text-padding
+        > .v-card-text
+          font-size: inherit
+          letter-spacing: $dialog-card-text-letter-spacing
+          line-height: inherit
+          padding: $dialog-card-text-padding
 
 .v-dialog--fullscreen
   --v-scrollbar-offset: 0px
@@ -54,23 +56,27 @@
     top: 0
     left: 0
 
-    > .v-card,
-    > .v-sheet
-      min-height: 100%
-      min-width: 100%
-      border-radius: 0
+    &,
+    > form
+      > .v-card,
+      > .v-sheet
+        min-height: 100%
+        min-width: 100%
+        border-radius: 0
 
-.v-dialog--scrollable > .v-overlay__content,
-.v-dialog--scrollable > .v-overlay__content > form
-  display: flex
-
-  > .v-card
+.v-dialog--scrollable > .v-overlay__content
+  &,
+  > form
     display: flex
-    flex: 1 1 100%
-    flex-direction: column
-    max-height: 100%
-    max-width: 100%
+    overflow: hidden
+
+    > .v-card
+      display: flex
+      flex: 1 1 100%
+      flex-direction: column
+      max-height: 100%
+      max-width: 100%
 
-    > .v-card-text
-      backface-visibility: hidden
-      overflow-y: auto
+      > .v-card-text
+        backface-visibility: hidden
+        overflow-y: auto