From 144ffe3cc0a54a160ce076a077c0714a9733c450 Mon Sep 17 00:00:00 2001
From: Tim Etchells <timetchells@ibm.com>
Date: Tue, 23 Jun 2020 12:15:58 -0400
Subject: [PATCH] Fix modal dialog max-width and text wrapping

Signed-off-by: Tim Etchells <timetchells@ibm.com>
---
 .../src/main/browser/dialogs/modal-notification.ts |  2 +-
 .../browser/dialogs/style/modal-notification.css   | 14 +++++---------
 2 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/packages/plugin-ext/src/main/browser/dialogs/modal-notification.ts b/packages/plugin-ext/src/main/browser/dialogs/modal-notification.ts
index 2b2d3869c13d8..0b9592a541313 100644
--- a/packages/plugin-ext/src/main/browser/dialogs/modal-notification.ts
+++ b/packages/plugin-ext/src/main/browser/dialogs/modal-notification.ts
@@ -64,7 +64,7 @@ export class ModalNotification extends AbstractDialog<string | undefined> {
 
         const textContainer = messageNode.appendChild(document.createElement('div'));
         textContainer.classList.add(TEXT);
-        const textElement = textContainer.appendChild(document.createElement('pre'));
+        const textElement = textContainer.appendChild(document.createElement('p'));
         textElement.textContent = text;
 
         actions.forEach((action: MainMessageItem) => {
diff --git a/packages/plugin-ext/src/main/browser/dialogs/style/modal-notification.css b/packages/plugin-ext/src/main/browser/dialogs/style/modal-notification.css
index 6004158c9119e..4cbfa23903516 100644
--- a/packages/plugin-ext/src/main/browser/dialogs/style/modal-notification.css
+++ b/packages/plugin-ext/src/main/browser/dialogs/style/modal-notification.css
@@ -26,10 +26,11 @@
     clear: both;
     box-sizing: border-box;
     position: relative;
-    width: 100%;
     min-width: 200px;
-    background-color: var(--theia-editorWidget-background);
+    max-width: min(66vw, 800px);
     min-height: 35px;
+    max-height: min(66vh, 600px);
+    background-color: var(--theia-editorWidget-background);
     margin-bottom: 1px;
     color: var(--theia-editorWidget-foreground);
 }
@@ -60,8 +61,6 @@
 .modal-Notification .text {
     order: 2;
     display: inline-block;
-    max-height: calc(100vh - 100px);
-    max-width: calc(100vw - 100px);
     -webkit-user-select: text;
     -moz-user-select: text;
     -ms-user-select: text;
@@ -71,11 +70,13 @@
     height: 100%;
     padding: 10px;
     overflow: auto;
+    white-space: pre-wrap;
 }
 
 .modal-Notification .text > p {
     margin: 0;
     font-size: var(--theia-ui-font-size1);
+    font-family: var(--theia-ui-font-family);
     vertical-align: middle;
 }
 
@@ -106,8 +107,3 @@
 .modal-Notification .buttons > button:hover {
     background-color: var(--theia-button-hoverBackground);
 }
-
-.modal-Notification pre {
-    font-family: var(--theia-ui-font-family);
-    font-size: var(--theia-ui-font-size1);
-}