fix(plugins/plugin-client-common): fullscreen pty apps like vi are a …

…bit too tall part of kubernetes-sigs#7598
starpit · Jun 9, 2021 · bdf9e20 · bdf9e20
1 parent 5a86162
commit bdf9e20
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 2 deletions.
diff --git a/plugins/plugin-client-common/src/components/Views/Terminal/ScrollableTerminal.tsx b/plugins/plugin-client-common/src/components/Views/Terminal/ScrollableTerminal.tsx
@@ -1315,7 +1315,9 @@ export default class ScrollableTerminal extends React.PureComponent<Props, State
       >
         <React.Fragment>
           {this.state.splits.length > 1 && <SplitHeader onRemove={scrollback.remove} onClear={scrollback.clear} />}
-          <ul className="kui--scrollback-block-list">{this.blocks(tab, scrollback, sbidx)}</ul>
+          <ul className="kui--scrollback-block-list">
+            <div className="kui--scrollback-block-list-for-sizing">{this.blocks(tab, scrollback, sbidx)}</div>
+          </ul>
         </React.Fragment>
       </div>
     )

diff --git a/plugins/plugin-client-common/src/components/Views/Terminal/getSize.ts b/plugins/plugin-client-common/src/components/Views/Terminal/getSize.ts
@@ -31,7 +31,7 @@ function paddingVertical(elt: Element) {
 }
 
 export default function getSize(this: HTMLElement): { width: number; height: number } {
-  const enclosingRect = this.getBoundingClientRect()
+  const enclosingRect = this.querySelector('.kui--scrollback-block-list-for-sizing').getBoundingClientRect()
 
   const selectorForWidthPad = '.repl-block .repl-output'
   const widthPadElement = this.querySelector(selectorForWidthPad)

diff --git a/plugins/plugin-client-common/web/scss/components/Terminal/Block.scss b/plugins/plugin-client-common/web/scss/components/Terminal/Block.scss
@@ -78,6 +78,20 @@
   height: 100%;
 }
 
+/**
+ * e.g. so that Terminal/getSize() can have a height that doesn't
+   require computing the padding we may associate with the
+   ScrollbackBlockList
+ *
+ */
+@include ScrollbackBlockList {
+  flex: 1;
+  display: flex;
+  .kui--scrollback-block-list-for-sizing {
+    flex: 1;
+  }
+}
+
 /** Coloring the context border by status of the block */
 @include Scrollback {
   .repl-input:hover,