fix: improve handling of narrower windows

1) hide CurrentGitBranch in narrower windows
2) don't show the status text (only status badge) in narrower windows

Fixes #4181

Author: starpit

plugins/plugin-client-common/src/components/StatusStripe/TextWithIconWidget.tsx

@@ -24,6 +24,7 @@ interface Props {
   text: string
   viewLevel: ViewLevel
 
+  className?: string
   iconIsNarrow?: boolean
   iconOnclick?: string
   textOnclick?: string
@@ -64,7 +65,11 @@ export default class TextWithIconWidget extends React.PureComponent<Props> {
 
     return (
       <div
-        className={'kui--status-stripe-element' + (!this.props.id ? '' : ' ' + this.props.id)}
+        className={
+          'kui--status-stripe-element' +
+          (!this.props.id ? '' : ' ' + this.props.id) +
+          (this.props.className ? ' ' + this.props.className : '')
+        }
         data-view={this.props.viewLevel}
       >
         {iconPart}

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

@@ -59,28 +59,48 @@
   }
 }
 
-.repl.sidecar-visible .bx--data-table-container .bx--data-table {
-  th[data-key='STATUS'],
-  td.kui--status-cell {
-    padding-left: 0;
+@mixin narrow-window {
+  @media (max-width: 44rem) {
+    @content;
   }
-  [data-tag='badge'] {
-    justify-content: center;
+}
 
-    [data-tag='badge-circle'] {
-      margin: 0;
-      width: 1em;
-      height: 1em;
-      border-radius: 0;
+@mixin badge-only {
+  .bx--data-table-container .bx--data-table {
+    th[data-key='STATUS'],
+    td.kui--status-cell {
+      padding-left: 0;
     }
+    [data-tag='badge'] {
+      justify-content: center;
+
+      [data-tag='badge-circle'] {
+        margin: 0;
+        width: 1em;
+        height: 1em;
+        border-radius: 0;
+      }
 
-    .kui--cell-inner-text {
-      /* show only the badge-circle when the sidecar is open */
-      display: none;
+      .kui--cell-inner-text {
+        /* show only the badge-circle when the sidecar is open */
+        display: none;
+      }
     }
   }
 }
 
+/* fine-tune the STATUS/badge presentation of tables when the sidecar is open, or with narrower windows */
+.repl.sidecar-visible {
+  @include badge-only;
+}
+@include narrow-window {
+  @include badge-only;
+
+  .kui--hide-in-narrower-windows {
+    display: none !important;
+  }
+}
+
 [data-table-watching='true'] .bx--data-table {
   [data-tag='badge-circle'].yellow-background {
     animation: var(--animation-repeating-pulse);

plugins/plugin-client-default/src/index.tsx

@@ -33,7 +33,7 @@ export default function renderMain(props: KuiProps) {
   return (
     <Kui isPopup={props.isPopup} commandLine={props.commandLine}>
       <ContextWidgets>
-        <CurrentGitBranch />
+        <CurrentGitBranch className="kui--hide-in-narrower-windows" />
         <CurrentContext />
         <CurrentNamespace />
       </ContextWidgets>

plugins/plugin-git/src/CurrentGitBranch.tsx

@@ -22,13 +22,17 @@ import { ViewLevel, TextWithIconWidget } from '@kui-shell/plugin-client-common'
 
 const strings = i18n('plugin-bash-like')
 
+interface Props {
+  className?: string
+}
+
 interface State {
   text: string
   viewLevel: ViewLevel
 }
 
-export default class CurrentGitBranch extends React.PureComponent<{}, State> {
-  public constructor(props = {}) {
+export default class CurrentGitBranch extends React.PureComponent<Props, State> {
+  public constructor(props: Props) {
     super(props)
 
     this.state = {
@@ -91,6 +95,7 @@ export default class CurrentGitBranch extends React.PureComponent<{}, State> {
   public render() {
     return (
       <TextWithIconWidget
+        className={this.props.className}
         text={this.state.text}
         viewLevel={this.state.viewLevel}
         id="kui--plugin-git--current-git-branch"