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

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

Hide file tree

Showing 3 changed files with 19 additions and 11 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
@@ -22,16 +22,8 @@ function paddingHorizontal(elt: Element) {
   )
 }
 
-function paddingVertical(elt: Element) {
-  const style = window.getComputedStyle(elt)
-  return (
-    parseInt(style.getPropertyValue('padding-top') || '0', 10) +
-    parseInt(style.getPropertyValue('padding-bottom') || '0', 10)
-  )
-}
-
 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)
@@ -42,7 +34,7 @@ export default function getSize(this: HTMLElement): { width: number; height: num
   const { width: contextWidth } = contextElement ? contextElement.getBoundingClientRect() : { width: 0 }
 
   const width = enclosingRect.width - paddingHorizontal(widthPadElement) - contextWidth
-  const height = enclosingRect.height - paddingVertical(this /* heightPadElement */)
+  const height = enclosingRect.height // kui--scrollback-block-list-for-sizing will include any outer padding
 
   return { width, height }
 }
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,