feat(Dialog): All variants use flex (#1269)

Co-authored-by: Mayank <[email protected]>

.changeset/thirty-lemons-tie.md

@@ -0,0 +1,6 @@
+---
+'@itwin/itwinui-css': major
+'@itwin/itwinui-react': major
+---
+
+All dialog variants have `flex` applied by default. This means the content should be wrapped with `Dialog.Content` or `ModalContent` for optimal layout.

packages/itwinui-css/src/dialog/dialog.scss

@@ -31,6 +31,8 @@ $iui-dialogue-resizable-min-height: 7.75rem; // 7.75rem = 124px = title bar heig
   padding: var(--iui-size-s) var(--iui-size-m);
   pointer-events: auto;
   background-color: var(--iui-color-background);
+  display: flex;
+  flex-direction: column;
   @media (forced-colors: active) {
     border: 1px solid;
   }
@@ -52,6 +54,7 @@ $iui-dialogue-resizable-min-height: 7.75rem; // 7.75rem = 124px = title bar heig
   max-width: Max(50%, $iui-dialog-width);
   min-width: Min(100%, $iui-dialog-width);
   max-height: 100vh;
+  max-height: 100dvh;
 
   &:not([data-iui-placement]) {
     left: 50%;
@@ -95,8 +98,6 @@ $iui-dialogue-resizable-min-height: 7.75rem; // 7.75rem = 124px = title bar heig
   width: 100vw;
   top: 0;
   left: 0;
-  display: flex;
-  flex-direction: column;
   will-change: transform;
 
   &:not(.iui-dialog-visible) {
@@ -114,8 +115,6 @@ $iui-dialogue-resizable-min-height: 7.75rem; // 7.75rem = 124px = title bar heig
 }
 
 .iui-dialog-draggable {
-  display: flex;
-  flex-direction: column;
   border: 1px solid var(--iui-color-border);
   min-height: $iui-dialogue-resizable-min-height;
 }
@@ -169,8 +168,6 @@ $iui-dialogue-resizable-min-height: 7.75rem; // 7.75rem = 124px = title bar heig
   padding: 0 var(--iui-size-m);
   overflow-y: auto;
   overflow-y: overlay;
-  max-height: calc(100vh - 6.75rem); //6.75rem = 108px = button height + paddings + bottom bar
-  max-height: calc(100dvh - 6.75rem);
 }
 
 .iui-dialog-button-bar {