Fix modal dialog max size and text wrapping

Signed-off-by: Tim Etchells <timetchells@ibm.com>
eclipse-theia · Jun 29, 2020 · a62011a · a62011a
1 parent 3f42537
commit a62011a
Show file tree

Hide file tree

Showing 2 changed files with 5 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,8 +26,8 @@
     clear: both;
     box-sizing: border-box;
     position: relative;
-    width: 100%;
     min-width: 200px;
+    max-width: min(66vw, 800px);
     background-color: var(--theia-editorWidget-background);
     min-height: 35px;
     margin-bottom: 1px;
@@ -60,22 +60,22 @@
 .modal-Notification .text {
     order: 2;
     display: inline-block;
-    max-height: calc(100vh - 100px);
-    max-width: calc(100vw - 100px);
+    max-height: min(66vh, 600px);
     -webkit-user-select: text;
     -moz-user-select: text;
     -ms-user-select: text;
     user-select: text;
     align-self: center;
     flex: 1 100%;
-    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 +106,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);
-}