fix: improve presentation with narrow windows

e.g. TopNavSidecar tabs change to unthemed colors

Fixes #3954

Author: starpit

plugins/plugin-client-common/src/components/TopTabStripe/index.tsx

@@ -165,7 +165,7 @@ export default class TopTabStripe extends React.PureComponent<Props> {
    */
   public render() {
     return (
-      <Header aria-label="Header">
+      <Header aria-label="Header" className="kui--top-tab-stripe">
         {/* this.headerMenu(args) */}
         {this.headerName()}
         {this.tabs()}

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

@@ -195,3 +195,9 @@
     }
   }
 }
+
+@media (max-width: 42rem) {
+  .kui--top-tab-stripe {
+    display: none;
+  }
+}

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

@@ -23,37 +23,11 @@ body td {
   transition-timing-function: var(--transition-timing-function);
 }
 
-.kui--sidecar .bx--tabs,
-.kui--sidecar .bx--tabs .bx--tabs__nav,
-.kui--sidecar .bx--tabs .bx--tabs__nav li {
-  width: unset;
-  min-height: unset;
-  position: unset;
-}
-.kui--sidecar a.bx--tabs__nav-link,
-.kui--sidecar a.bx--tabs__nav-link:active {
-  outline: none;
-  width: unset;
-  min-width: 8em;
-}
 li.bx--tabs__nav-item.sidecar-bottom-stripe-button,
 li.bx--tabs__nav-item.sidecar-bottom-stripe-button a {
   flex: 1;
 }
 
-body[kui-theme-style]
-  .kui--sidecar
-  .bx--tabs__nav-item--selected:not(.bx--tabs__nav-item--disabled)
-  .bx--tabs__nav-link {
-  color: var(--color-text-01);
-  border-color: var(--color-brand-03);
-  opacity: 1;
-}
-body.subwindow[kui-theme-style] .kui--sidecar .bx--tabs__nav-item .bx--tabs__nav-link {
-  font-size: 1.125vw;
-  line-height: unset;
-  height: unset;
-}
 a.bx--tabs__nav-link:focus,
 a.bx--tabs__nav-link:active {
   width: 100%;

plugins/plugin-client-common/web/css/static/split-pane.scss

@@ -85,3 +85,14 @@
     }
   }
 }
+
+@media (max-width: 42rem) {
+  .SplitPane.vertical:not(.kui--secondary-closed) {
+    .Pane1 {
+      flex: 0 !important;
+    }
+    .Pane2 {
+      width: 100% !important;
+    }
+  }
+}

plugins/plugin-sidecar/web/css/static/sidecar-main.css

@@ -901,6 +901,59 @@ body:not(.no-tooltips-anywhere)
   outline-color: var(--color-brand-03);
 }
 
+[kui-theme-style] .kui--sidecar {
+  .bx--tabs,
+  .bx--tabs .bx--tabs__nav,
+  .bx--tabs .bx--tabs__nav li,
+  .bx--tabs .bx--tabs__nav li a {
+    width: unset;
+    min-height: unset;
+    position: unset;
+    font-size: unset;
+  }
+  a.bx--tabs__nav-link,
+  a.bx--tabs__nav-link:active {
+    outline: none;
+    width: unset;
+    min-width: 8em;
+  }
+
+  .bx--tabs {
+    font-size: 0.875em;
+    line-height: 1.125em;
+    .bx--tabs__nav {
+      background: none;
+      box-shadow: none;
+    }
+  }
+  .bx--tabs-trigger {
+    display: none;
+  }
+  .bx--tabs__nav--hidden {
+    max-height: unset;
+  }
+  .bx--tabs__nav-item {
+    height: 2.5em;
+  }
+  .bx--tabs__nav-item--selected:not(.bx--tabs__nav-item--disabled) {
+    display: flex;
+    background-color: transparent;
+    .bx--tabs__nav-link {
+      border-bottom-width: 3px;
+      margin: 0;
+      height: 2.5em;
+      padding: 0.5em 1em;
+      line-height: 1.125em;
+    }
+  }
+
+  .bx--tabs__nav-item--selected .bx--tabs__nav-link {
+    color: var(--color-text-01);
+    border-color: var(--color-brand-03);
+    opacity: 1;
+  }
+}
+
 body[kui-theme-style] a.bx--tabs__nav-link {
   color: var(--color-text-02);
   border-color: var(--color-text-02);