Fix #841 (#842)

microsoft · Oct 11, 2023 · 13cf0e3 · 13cf0e3
1 parent d4b28c6
commit 13cf0e3
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 12 deletions.
diff --git a/src/Core/Components/Dialog/ContentComponents/MessageBox.razor.css b/src/Core/Components/Dialog/ContentComponents/MessageBox.razor.css
@@ -3,7 +3,6 @@
     -webkit-font-smoothing: antialiased;
     color: var( --neutral-foreground-rest);
     word-break: break-word;
-    min-height: 80px;
 }
 
 .fluent-messagebox ::deep .icon {

diff --git a/src/Core/Components/Dialog/FluentDialog.razor.css b/src/Core/Components/Dialog/FluentDialog.razor.css
@@ -7,7 +7,7 @@
     max-width: 80%;
 }
 
-fluent-dialog:has(div[class~="fluent-dialog-body"])::part(control) {
+fluent-dialog:has(div[class~="fluent-dialog-body"]):not(:is(fluent-dialog[class~="right"], fluent-dialog[class~="left"]) )::part(control) {
     height: auto;
     display: grid;
     grid-template-columns: 1fr;
@@ -18,24 +18,30 @@ fluent-dialog:has(div[class~="fluent-dialog-body"])::part(control) {
         'dialog-footer';
 }
 
+fluent-dialog[class~="right"]::part(control),
+fluent-dialog[class~="left"]::part(control) {
+    display: flex;
+    flex-direction: column;
+    border-radius: unset;
+    border-width: 0;
+    --dialog-height: 100dvh;
+    height: 100dvh;
+}
+
+:is(fluent-dialog[class~="right"], fluent-dialog[class~="left"]) ::deep .fluent-dialog-body {
+    flex-grow: 1;
+    overflow-y: scroll;
+}
+
 fluent-dialog[class~="right"]::part(control) {
     position: absolute;
     right: 0;
-    border-radius: unset;
-    border-width: 0;
-    max-height: 100%;
-    --dialog-height: 100%;
-    height: 100% !important;
 }
 
 fluent-dialog[class~="left"]::part(control) {
     position: absolute;
     left: 0;
-    border-radius: unset;
-    border-width: 0;
-    max-height: 100%;
-    --dialog-height: 100%;
-    height: 100% !important;
+
 }
 
 fluent-dialog ::deep .fluent-dialog-header {