Apply style improvement from review suggestion

jupyterlab · Mar 3, 2021 · d431325 · d431325
1 parent 49d5dcc
commit d431325
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 11 deletions.
diff --git a/TODO b/TODO
@@ -11,7 +11,7 @@
 - [x] Take advantage of builtin feature of MainAreaWidget (spinner)
 - [x] Add label - base / head in diff widgets
 - [x] Simplify number of div to include add button on notebook (and to fix hiding it when unchanged cells are collapsed)
-- [ ] Take into account review from Nick
+- [x] Take into account review from Nick
 - [x] Add support for comment at PR level for GitHub
 - [ ] Document the code
 - [ ] Tests

diff --git a/src/components/tab/PullRequestDescriptionTab.tsx b/src/components/tab/PullRequestDescriptionTab.tsx
@@ -35,15 +35,18 @@ export class PullRequestDescriptionTab extends MainAreaWidget<Panel> {
     this.renderMime = props.renderMime;
     content.addClass('jp-PullRequestTab');
 
-    this.content.addWidget(
+    const container = new Panel();
+    container.addClass('jp-PullRequestDescriptionTab');
+
+    container.addWidget(
       PullRequestDescriptionTab.createHeader(
         props.pullRequest.title,
         props.pullRequest.link
       )
     );
 
     const markdownRenderer = props.renderMime.createRenderer('text/markdown');
-    this.content.addWidget(markdownRenderer);
+    container.addWidget(markdownRenderer);
 
     Promise.all([
       markdownRenderer.renderModel({
@@ -54,17 +57,19 @@ export class PullRequestDescriptionTab extends MainAreaWidget<Panel> {
         metadata: {},
         setData: () => null
       }),
-      this.loadComments(props.pullRequest.id, props.renderMime)
+      this.loadComments(container, props.pullRequest.id, props.renderMime)
     ])
       .then(() => {
         isLoaded.resolve();
+        this.content.addWidget(container);
       })
       .catch(reason => {
         isLoaded.reject(reason);
       });
   }
 
   protected async loadComments(
+    container: Panel,
     prId: string,
     renderMime: IRenderMimeRegistry
   ): Promise<void> {
@@ -81,21 +86,23 @@ export class PullRequestDescriptionTab extends MainAreaWidget<Panel> {
             thread,
             handleRemove: (): void => null
           });
-          this.content.addWidget(widget);
+          container.addWidget(widget);
         });
 
-        this.content.addWidget(this.createNewThreadButton());
+        container.addWidget(this.createNewThreadButton());
 
         return Promise.resolve();
       })
       .catch(reason => {
-        this.content.addWidget(this.createNewThreadButton());
+        container.addWidget(this.createNewThreadButton());
         return Promise.reject(reason);
       });
   }
 
   private static createHeader(title: string, link: string): Widget {
-    const node = generateNode('div', { class: 'jp-PullRequestDescriptionTab' });
+    const node = generateNode('div', {
+      class: 'jp-PullRequestDescriptionHeader'
+    });
     node.appendChild(generateNode('h1', {}, title));
     node.appendChild(
       generateNode(

diff --git a/style/index.css b/style/index.css
@@ -151,24 +151,34 @@
   padding: 0px 10px;
 }
 
+.jp-PullRequestTab > .lm-Widget {
+  max-width: 930px;
+  height: 100%;
+  margin: auto;
+}
+
 .jp-PullRequestDescriptionTab {
+  overflow: auto;
+}
+
+.jp-PullRequestDescriptionHeader {
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
 
-.jp-PullRequestDescriptionTab * {
+.jp-PullRequestDescriptionHeader * {
   margin-top: 8px !important;
   margin-bottom: 8px !important;
 }
 
-.jp-PullRequestDescriptionTab h1 {
+.jp-PullRequestDescriptionHeader h1 {
   font-size: var(--jp-ui-font-size3);
   color: var(--jp-ui-font-color0);
   font-weight: 600;
 }
 
-.jp-PullRequestDescriptionTab h2 {
+.jp-PullRequestDescriptionHeader h2 {
   font-size: var(--jp-ui-font-size);
   color: var(--jp-ui-font-color2);
   font-weight: 400;
@@ -391,6 +401,10 @@ p.jp-PullRequestCommentItemContentTitle {
 }
 
 /* Plain text diff */
+.jp-git-PlainText-diff.jp-PullRequestTextDiff {
+  height: auto;
+}
+
 .CodeMirror-gutter.jp-PullRequestCommentDecoration,
 .CodeMirror-gutter-elt > .jp-PullRequestCommentDecoration {
   background: transparent;