Fix displaying for large dialogs (#12052)

Signed-off-by: Jonah Iden <[email protected]>
Co-authored-by: Paul Maréchal <[email protected]>

Author: jonah-iden

Diff for: examples/api-samples/src/browser/menu/sample-menu-contribution.ts

@@ -14,7 +14,7 @@
 // SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
 // *****************************************************************************
 
-import { QuickInputService } from '@theia/core/lib/browser';
+import { ConfirmDialog, QuickInputService } from '@theia/core/lib/browser';
 import {
     Command, CommandContribution, CommandRegistry, MAIN_MENU_BAR,
     MenuContribution, MenuModelRegistry, MenuNode, MessageService, SubMenuOptions
@@ -29,6 +29,14 @@ const SampleCommand2: Command = {
     id: 'sample-command2',
     label: 'Sample Command2'
 };
+const SampleCommandConfirmDialog: Command = {
+    id: 'sample-command-confirm-dialog',
+    label: 'Sample Confirm Dialog'
+};
+const SampleComplexCommandConfirmDialog: Command = {
+    id: 'sample-command-complex-confirm-dialog',
+    label: 'Sample Complex Confirm Dialog'
+};
 const SampleCommandWithProgressMessage: Command = {
     id: 'sample-command-with-progress',
     label: 'Sample Command With Progress Message'
@@ -63,6 +71,38 @@ export class SampleCommandContribution implements CommandContribution {
                 alert('This is sample command2!');
             }
         });
+        commands.registerCommand(SampleCommandConfirmDialog, {
+            execute: async () => {
+                const choice = await new ConfirmDialog({
+                    title: 'Sample Confirm Dialog',
+                    msg: 'This is a sample with lots of text:' + Array(100)
+                        .fill(undefined)
+                        .map((element, index) => `\n\nExtra line #${index}`)
+                        .join('')
+                }).open();
+                this.messageService.info(`Sample confirm dialog returned with: \`${JSON.stringify(choice)}\``);
+            }
+        });
+        commands.registerCommand(SampleComplexCommandConfirmDialog, {
+            execute: async () => {
+                const mainDiv = document.createElement('div');
+                for (const color of ['#FF00007F', '#00FF007F', '#0000FF7F']) {
+                    const innerDiv = document.createElement('div');
+                    innerDiv.textContent = 'This is a sample with lots of text:' + Array(50)
+                        .fill(undefined)
+                        .map((_, index) => `\n\nExtra line #${index}`)
+                        .join('');
+                    innerDiv.style.backgroundColor = color;
+                    innerDiv.style.padding = '5px';
+                    mainDiv.appendChild(innerDiv);
+                }
+                const choice = await new ConfirmDialog({
+                    title: 'Sample Confirm Dialog',
+                    msg: mainDiv
+                }).open();
+                this.messageService.info(`Sample confirm dialog returned with: \`${JSON.stringify(choice)}\``);
+            }
+        });
         commands.registerCommand(SampleQuickInputCommand, {
             execute: async () => {
                 const result = await this.quickInputService.input({

Diff for: packages/core/src/browser/style/dialog.css

@@ -65,11 +65,17 @@
     align-items: stretch;
     position: relative;
     padding: calc(var(--theia-ui-padding)*2);
+    white-space: pre-line;
+    max-height: 50vh;
+    overflow-y: auto;
+}
+
+.p-Widget.dialogOverlay .dialogContent > * {
+    height: 100%;
 }
 
 .p-Widget.dialogOverlay .dialogControl {
     padding: calc(var(--theia-ui-padding)*2);
-    padding-top: 0px;
     display: flex;
     flex-direction: row;
     align-content: right;