From 8b48f3fa0f27b7b195630608a08814c4ecf91aab Mon Sep 17 00:00:00 2001
From: Liam Fitzgerald <liam@urizen.co>
Date: Wed, 15 Apr 2020 15:04:04 +1000
Subject: [PATCH] chat-js: adjust line height in chat input

Set the line height of the input to be the same as a sent message.
Additionally fixes an issue that would cause unnecessary scrollbars to
be shown.
---
 .../chat/src/js/components/lib/chat-input.js  | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/pkg/interface/chat/src/js/components/lib/chat-input.js b/pkg/interface/chat/src/js/components/lib/chat-input.js
index 67cc62ed0..9004b1efe 100644
--- a/pkg/interface/chat/src/js/components/lib/chat-input.js
+++ b/pkg/interface/chat/src/js/components/lib/chat-input.js
@@ -8,7 +8,11 @@ import { Sigil } from '/components/lib/icons/sigil';
 
 import { uuid, uxToHex, hexToRgba } from '/lib/util';
 
-const DEFAULT_INPUT_HEIGHT = 28;
+
+// line height
+const INPUT_LINE_HEIGHT = 28;
+
+const INPUT_TOP_PADDING = 3;
 
 
 function getAdvance(a, b) {
@@ -103,7 +107,7 @@ export class ChatInput extends Component {
 
     this.state = {
       message: '',
-      textareaHeight: DEFAULT_INPUT_HEIGHT,
+      textareaHeight: INPUT_LINE_HEIGHT + INPUT_TOP_PADDING + 1,
       patpSuggestions: [],
       selectedSuggestion: null
     };
@@ -309,9 +313,8 @@ export class ChatInput extends Component {
   }
 
   textareaInput() {
-    const newHeight = this.textareaRef.current.scrollHeight < DEFAULT_INPUT_HEIGHT * 8
-      ? `${this.textareaRef.current.scrollHeight}px`
-      : `${DEFAULT_INPUT_HEIGHT * 8}px`
+    const maxHeight = INPUT_LINE_HEIGHT * 8 + INPUT_TOP_PADDING;
+    const newHeight = `${Math.min(maxHeight, this.textareaRef.current.scrollHeight)}px`;
 
     this.setState({
       textareaHeight: newHeight
@@ -418,7 +421,7 @@ export class ChatInput extends Component {
 
     this.setState({
       message: '',
-      textareaHeight: DEFAULT_INPUT_HEIGHT
+      textareaHeight: INPUT_LINE_HEIGHT + INPUT_TOP_PADDING + 1
     });
   }
 
@@ -459,8 +462,8 @@ export class ChatInput extends Component {
         </div>
         <div className="fr h-100 flex bg-gray0-d" style={{ flexGrow: 1 }}>
           <textarea
-            className={"pl3 bn bg-gray0-d white-d"}
-            style={{ flexGrow: 1, height: state.textareaHeight, paddingTop: 6, resize: "none" }}
+            className={"pl3 bn bg-gray0-d white-d lh-copy"}
+            style={{ flexGrow: 1, height: state.textareaHeight, paddingTop: INPUT_TOP_PADDING, resize: "none" }}
             autoCapitalize="none"
             autoFocus={(
               /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(