Fix modal dialog max-width and text wrapping

Signed-off-by: Tim Etchells <timetchells@ibm.com>
eclipse-theia · Jun 25, 2020 · 144ffe3 · 144ffe3
1 parent f5c0827
commit 144ffe3
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 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
@@ -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
@@ -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);
-}