fix(plugins/plugin-client-common): a few more rem/em font-size issues

Fixes #5058

Author: starpit

plugins/plugin-client-common/src/components/spi/Card/impl/PatternFly.tsx

@@ -60,20 +60,22 @@ export default class PatternflyCard extends React.PureComponent<Props, State> {
     return (
       <CardActions>
         {...this.props.inlineActions}
-        {this.props.actions && <Dropdown
-          onSelect={() => this.setState({ isOpen: !this.state.isOpen })}
-          toggle={
-            <KebabToggle
-              onToggle={isOpen => {
-                this.setState({ isOpen })
-              }}
-            />
-          }
-          isOpen={this.state.isOpen}
-          isPlain
-          dropdownItems={this.renderDropDownItems(this.props.actions)}
-          position={'right'}
-       />}
+        {this.props.actions && (
+          <Dropdown
+            onSelect={() => this.setState({ isOpen: !this.state.isOpen })}
+            toggle={
+              <KebabToggle
+                onToggle={isOpen => {
+                  this.setState({ isOpen })
+                }}
+              />
+            }
+            isOpen={this.state.isOpen}
+            isPlain
+            dropdownItems={this.renderDropDownItems(this.props.actions)}
+            position={'right'}
+          />
+        )}
       </CardActions>
     )
   }
@@ -85,7 +87,12 @@ export default class PatternflyCard extends React.PureComponent<Props, State> {
   /** card actions, icon and custom header node will be situated in Card Head */
   private header() {
     return (
-      (this.props.header || this.props.icon || this.props.titleInHeader || this.props.bodyInHeader || this.props.inlineActions || this.props.actions) && (
+      (this.props.header ||
+        this.props.icon ||
+        this.props.titleInHeader ||
+        this.props.bodyInHeader ||
+        this.props.inlineActions ||
+        this.props.actions) && (
         <CardHeader className="kui--card-header">
           <CardHeaderMain>{this.props.header || (this.props.icon && this.icon())}</CardHeaderMain>
           {(this.props.inlineActions || this.props.actions) && this.cardActions()}
@@ -130,9 +137,13 @@ export default class PatternflyCard extends React.PureComponent<Props, State> {
   }
 
   public render() {
-    const basicClassName = 'kui--card small-top-pad small-bottom-pad'
+    const basicClassName = 'kui--card'
     return (
-      <Card isCompact className={!this.props.className ? basicClassName : `${basicClassName} ${this.props.className}`}>
+      <Card
+        isCompact
+        {...this.props}
+        className={!this.props.className ? basicClassName : `${basicClassName} ${this.props.className}`}
+      >
         {React.Children.count(this.props.children) > 0 && (
           <React.Fragment>
             {this.header()}

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

@@ -75,7 +75,7 @@
 
 [kui-theme-style] .kui--repl-block-right-element {
   color: inherit;
-  font-size: 0.875rem;
+  font-size: 0.75rem;
 }
 
 .repl-result,

plugins/plugin-client-common/web/css/static/sidecar-carbon.css

@@ -96,7 +96,7 @@ body[kui-theme-style] a.bx--tabs__nav-link {
   [kui-theme-style] .kui--sidecar {
     a.bx--tabs__nav-link,
     a.bx--tabs__nav-link:active {
-      min-width: 5em;
+      min-width: 5rem;
     }
   }
 }
@@ -105,7 +105,7 @@ body[kui-theme-style] a.bx--tabs__nav-link {
   [kui-theme-style] .kui--sidecar {
     a.bx--tabs__nav-link,
     a.bx--tabs__nav-link:active {
-      min-width: 6em;
+      min-width: 6rem;
     }
   }
 }

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

@@ -1,5 +1,3 @@
-$toolbar-height: 1.875em;
-
 .bx--data-table-container.kui--data-table-container-with-toolbars.kui--data-table-container-with-title {
   padding-top: 0;
 }
@@ -38,16 +36,11 @@ body[kui-theme-style] .kui--data-table-toolbar {
     overflow-x: unset;
   }
 
-  & > div:not(:empty),
-  & > nav:not(:empty) {
-    height: $toolbar-height;
-  }
-
   nav[aria-label='Breadcrumb'] {
     display: flex;
     align-items: center;
     flex: 1;
-    height: 2.5rem;
+    height: 2.1875rem;
   }
 
   .kui--toolbar-button-with-icon {

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

@@ -44,6 +44,10 @@ $grid-cell-size: 1.25rem;
     flex: initial;
   }
 
+  .kui--card {
+    margin: 1rem 0 0;
+  }
+
   .kui--data-table-as-grid {
     .kui--card-header {
       border-bottom: 1px solid var(--color-base03);

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

@@ -16,5 +16,7 @@
 
 .repl-block {
   padding-left: 1rem;
-  padding-right: calc(1em * 0.875 - 0.1875em - 6px);
+}
+.repl-output {
+  padding-right: calc(1rem - 6px);
 }