Backport PR #11331: Updated dialog with text to a reasonable width

packages/apputils/src/dialog.tsx

@@ -97,6 +97,9 @@ export class Dialog<T> extends Widget {
     const layout = (this.layout = new PanelLayout());
     const content = new Panel();
     content.addClass('jp-Dialog-content');
+    if (typeof options.body === 'string') {
+      content.addClass('jp-Dialog-content-small');
+    }
     layout.addWidget(content);
 
     this._body = normalized.body;

packages/apputils/style/dialog.css

@@ -26,8 +26,7 @@
   margin-left: auto;
   margin-right: auto;
   background: var(--jp-layout-color1);
-  padding: 24px;
-  padding-bottom: 12px;
+  padding: 24px 24px 12px 24px;
   min-width: 300px;
   min-height: 150px;
   max-width: 1000px;
@@ -43,6 +42,10 @@
   resize: both;
 }
 
+.jp-Dialog-content.jp-Dialog-content-small {
+  max-width: 500px;
+}
+
 .jp-Dialog-button {
   overflow: visible;
 }