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 { 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..7c69b3040c1c1 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,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); -}