From 5e723e6e3a17003f196da1fb4ecf9199ed3c109d Mon Sep 17 00:00:00 2001
From: Nick Mitchell <nickm@us.ibm.com>
Date: Wed, 9 Jun 2021 13:08:00 -0400
Subject: [PATCH] fix(plugins/plugin-client-common): fullscreen pty apps like
 vi are a bit too tall

part of #7598
---
 .../Views/Terminal/ScrollableTerminal.tsx     |  4 +++-
 .../src/components/Views/Terminal/getSize.ts  | 12 ++----------
 .../scss/components/Terminal/Scrollback.scss  | 19 +++++++++++++++----
 3 files changed, 20 insertions(+), 15 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
index 524cd4f7b36..c4469bdc6c3 100644
--- a/plugins/plugin-client-common/src/components/Views/Terminal/ScrollableTerminal.tsx
+++ b/plugins/plugin-client-common/src/components/Views/Terminal/ScrollableTerminal.tsx
@@ -1316,7 +1316,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
index 3c10b71e60d..6e3bddd51fa 100644
--- 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/Scrollback.scss b/plugins/plugin-client-common/web/scss/components/Terminal/Scrollback.scss
index 4140aeafca3..f0400a5747e 100644
--- a/plugins/plugin-client-common/web/scss/components/Terminal/Scrollback.scss
+++ b/plugins/plugin-client-common/web/scss/components/Terminal/Scrollback.scss
@@ -40,10 +40,21 @@ $split-bgcolor: var(--color-repl-background);
   background-color: $split-bgcolor;
 }
 
+/**
+ * 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 {
-  /* these two rules given us inner scrolling on ScrollbackBlockList */
-  flex: 1;
-  overflow: auto;
-
   padding: $split-padding 0;
+
+  /* these rules given us inner scrolling on ScrollbackBlockList */
+  flex: 1;
+  display: flex;
+  overflow: hidden;
+  .kui--scrollback-block-list-for-sizing {
+    flex: 1;
+    overflow: auto;
+  }
 }