fix(plugins/plugin-client-common): Timeline view renders poorly in MiniSplit

this introduces some mixins for Table and Terminal
Fixes #5379

Author: starpit

plugins/plugin-client-common/src/components/Content/Table/Timeline.tsx

@@ -230,7 +230,7 @@ export default class Timeline extends React.PureComponent<Props, State> {
     }
 
     return (
-      <div className="kui--data-table-container bx--data-table-container">
+      <div className="kui--data-table-container bx--data-table-container kui--timeline-container">
         <div className="kui--timeline">
           {this.yAxis()}
           {this.xAxis()}

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

@@ -15,6 +15,21 @@
  */
 
 @import 'Bar';
+@import './_mixins';
+@import '../Terminal/_mixins';
+
+@include PlainTerminal {
+  @include TableContainer {
+    &.kui--timeline-container {
+      width: 35rem;
+    }
+  }
+}
+
+.kui--timeline-container,
+.kui--timeline {
+  height: 100%;
+}
 
 .kui--timeline {
   position: relative;
@@ -62,7 +77,16 @@
 
 .kui--timeline-buckets {
   display: flex;
-  height: 12rem;
+  height: 19.6875rem; /* 16:9, see 35rem above */
+}
+
+@include MiniSplit {
+  .kui--timeline-occupancy-line {
+    padding: 0;
+  }
+  .kui--timeline-buckets {
+    height: 100%;
+  }
 }
 
 .kui--timeline-bucket {

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

@@ -0,0 +1,21 @@
+/*
+ * Copyright 2020 IBM Corporation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@mixin TableContainer {
+  .kui--data-table-container {
+    @content;
+  }
+}

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

@@ -14,8 +14,10 @@
  * limitations under the License.
  */
 
+@import '_mixins';
+
 /** distinguish the mini splits */
-.kui--scrollback[data-is-minisplit] {
+@include MiniSplit {
   background-color: var(--color-base02);
   box-shadow: 1px 1px var(--color-base01);
   border: 1px dotted var(--color-base03);

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

@@ -0,0 +1,27 @@
+/*
+ * Copyright 2020 IBM Corporation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@mixin MiniSplit {
+  .kui--scrollback[data-is-minisplit] {
+    @content;
+  }
+}
+
+@mixin PlainTerminal {
+  .kui--scrollback:not([data-is-minisplit]):not([data-is-width-constrained]) {
+    @content;
+  }
+}