fix(plugins/plugin-client-common): minor spacing improvements for Commentary and Notebooks

Fixes #5503

Author: starpit

plugins/plugin-client-common/src/components/Content/Scalar/index.tsx

@@ -87,11 +87,7 @@ export default class Scalar extends React.PureComponent<Props, State> {
         return <pre>{response}</pre>
       } else if (typeof response === 'string') {
         // Markdown interpretes escapes, so we need to double-escape
-        return (
-          <pre>
-            <Markdown tab={tab} repl={tab.REPL} source={response.replace(/\\/g, '\\\\')} />
-          </pre>
-        )
+        return <Markdown tab={tab} repl={tab.REPL} source={response.replace(/\\/g, '\\\\')} />
       } else if (isCommentaryResponse(response)) {
         return <Commentary {...response.props} />
       } else if (isRadioTable(response)) {

plugins/plugin-client-common/src/components/Views/Terminal/Block/Output.tsx

@@ -240,8 +240,8 @@ export default class Output extends React.PureComponent<Props, State> {
     }
   }
 
-  private ctx(insideBrackets: React.ReactNode = this.props.displayedIdx || this.props.idx + 1) {
-    return <span className="repl-context">Out[{insideBrackets}]</span>
+  private ctx(/* insideBrackets: React.ReactNode = this.props.displayedIdx || this.props.idx + 1 */) {
+    // return <span className="repl-context">Out[{insideBrackets}]</span>
   }
 
   public render() {

plugins/plugin-client-common/web/css/static/repl.scss

@@ -166,12 +166,6 @@
   margin: 2px 0; /* firefox needs some vertical padding, otherwise descenders like "y" crop; weird */
   white-space: pre-wrap;
 }
-.repl-result code {
-  /* more invocation results */
-  /* here, we override the highlight.js theme, when rendering in the repl */
-  background: transparent;
-  color: var(--color-text-01);
-}
 
 /* e.g. reverse-i-search; see Input.tsx */
 .repl-input-element.repl-input-hidden {

plugins/plugin-client-common/web/css/static/ui.css

@@ -793,13 +793,16 @@ body.oops-total-catastrophe #restart-needed-warning {
 }
 .page-content p > code,
 .page-content li > code {
-  color: var(--color-base0F);
   opacity: 0.875;
   word-break: break-all;
 }
+.kui--sidecar .page-content p > code,
+.clickable:not(:hover) .page-content p > code {
+  color: var(--color-base0F);
+}
 $kui--page-content-h4-padding: 0.5rem;
 $kui--page-content-paragraph-padding: 0.375rem;
-.page-content p {
+.page-content p:not(:only-child) {
   padding: $kui--page-content-paragraph-padding 0;
 }
 .page-content h1 {

plugins/plugin-client-common/web/scss/components/Table/tables.scss

@@ -47,6 +47,9 @@ body .bx--data-table-container {
       line-height: inherit;
       font-weight: inherit;
     }
+    .clickable:not(:hover) p code {
+      color: var(--color-text-02);
+    }
 
     /* td [data-key='NAME'],
     td .kui--table-cell-is-name {

plugins/plugin-client-common/web/scss/components/Terminal/Block.scss

@@ -17,6 +17,9 @@
 @import '_mixins';
 @import '../Sidecar/_mixins';
 
+/** Inset of the <input> element w.r.t. the bordered/backgrounded region */
+$inset: 0.375rem;
+
 .repl-input,
 .repl-output {
   padding-right: calc(1rem - 6px);
@@ -69,7 +72,7 @@
     }
 
     .repl-output {
-      margin-top: 0.25rem;
+      margin-top: $inset;
     }
     .repl-input,
     .repl-output {
@@ -84,7 +87,6 @@
       display: flex;
       justify-content: flex-end;
       flex-basis: 3rem;
-      max-width: 3rem; /* Out[1] overflows, but it is currently hidden */
       text-align: end;
       margin-right: 0.5rem;
       position: relative;
@@ -99,11 +101,11 @@
       .repl-input {
         .repl-context,
         .repl-prompt-right-elements {
-          padding-top: 0.25rem;
+          padding-top: $inset;
         }
       }
       .repl-input-element-wrapper {
-        padding: 0.25rem 0 0.25rem 0.5rem;
+        padding: $inset 0 $inset 0.5rem;
         border: 1px solid transparent;
         align-items: stretch;
       }

plugins/plugin-client-common/web/scss/components/Terminal/Commentary.scss

@@ -18,22 +18,32 @@
 @import '../Sidecar/_mixins';
 @import '../common/_narrow-window';
 
-@mixin MajorHeaders {
-  h1,
-  h2 {
+@mixin Card {
+  .kui--commentary-card {
     @content;
   }
 }
 
+@mixin MajorHeaders {
+  @include Card {
+    h1,
+    h2 {
+      @content;
+    }
+  }
+}
+
 @mixin Paragraphs {
-  p {
-    @content;
+  @include Card {
+    p {
+      @content;
+    }
   }
 }
 
 @mixin FullWidth {
   @include Scrollback {
-    .kui--commentary-card {
+    @include Card {
       flex: 1;
     }
   }
@@ -48,6 +58,14 @@
     border-bottom: 1px solid var(--color-table-border2);
   }
 
+  @include Block {
+    &:not(:first-child) {
+      @include MajorHeaders {
+        margin-top: 0.5rem;
+      }
+    }
+  }
+
   @include Paragraphs {
     font-size: 1rem;
   }

plugins/plugin-client-common/web/scss/components/Terminal/_mixins.scss

@@ -35,3 +35,25 @@
     }
   }
 }
+
+@mixin Block {
+  .repl-block {
+    @content;
+  }
+}
+
+@mixin ActiveBlock {
+  @include Block {
+    &.repl-active {
+      @content;
+    }
+  }
+}
+
+@mixin FinishedBlock {
+  @include Block {
+    &:not(.repl-active) {
+      @content;
+    }
+  }
+}