Changed the post textbox resizing code to be more reliable and not rely on magic numbers

web/react/components/textbox.jsx

@@ -81,36 +81,42 @@ export default class Textbox extends React.Component {
     }
 
     resize() {
-        const e = this.refs.message.getTextbox();
-        const w = ReactDOM.findDOMNode(this.refs.wrapper);
+        const textbox = this.refs.message.getTextbox();
+        const $textbox = $(textbox);
+        const $wrapper = $(ReactDOM.findDOMNode(this.refs.wrapper));
 
-        const prevHeight = $(e).height();
+        const padding = parseInt($textbox.css('padding-bottom'), 10) + parseInt($textbox.css('padding-top'), 10);
+        const borders = parseInt($textbox.css('border-bottom-width'), 10) + parseInt($textbox.css('border-top-width'), 10);
+        const maxHeight = parseInt($textbox.css('max-height'), 10) - borders;
 
-        const lht = parseInt($(e).css('lineHeight'), 10);
-        const lines = e.scrollHeight / lht;
-        let mod = 15;
+        const prevHeight = $textbox.height();
 
-        if (lines < 2.5 || this.props.messageText === '') {
-            mod = 30;
-        }
+        // set the height to auto and remove the scrollbar so we can get the actual size of the contents
+        $textbox.css('height', 'auto').css('overflow-y', 'hidden');
 
-        if (e.scrollHeight - mod < 167) {
-            $(e).css({height: 'auto', 'overflow-y': 'hidden'}).height(e.scrollHeight - mod);
-            $(w).css({height: 'auto'}).height(e.scrollHeight + 2);
-            $(w).closest('.post-body__cell').removeClass('scroll');
-            if (this.state.preview) {
-                $(ReactDOM.findDOMNode(this.refs.preview)).css({height: 'auto', 'overflow-y': 'auto'}).height(e.scrollHeight - mod);
-            }
+        let height = textbox.scrollHeight - padding;
+
+        if (height + padding > maxHeight) {
+            height = maxHeight - padding;
+
+            // turn scrollbar on and move over attachment icon to compensate for that
+            $textbox.css('overflow-y', 'scroll');
+            $wrapper.closest('.post-body__cell').addClass('scroll');
         } else {
-            $(e).css({height: 'auto', 'overflow-y': 'scroll'}).height(167 - mod);
-            $(w).css({height: 'auto'}).height(163);
-            $(w).closest('.post-body__cell').addClass('scroll');
-            if (this.state.preview) {
-                $(ReactDOM.findDOMNode(this.refs.preview)).css({height: 'auto', 'overflow-y': 'scroll'}).height(163);
-            }
+            $wrapper.closest('.post-body__cell').removeClass('scroll');
         }
 
-        if (prevHeight !== $(e).height() && this.props.onHeightChange) {
+        // set the textarea to be the proper height
+        $textbox.height(height);
+
+        // set the wrapper height to match the height of the textbox including padding and borders
+        $wrapper.height(height + padding + borders);
+
+        if (this.state.preview) {
+            $(ReactDOM.findDOMNode(this.refs.preview)).height(height + borders);
+        }
+
+        if (height !== prevHeight && this.props.onHeightChange) {
             this.props.onHeightChange();
         }
     }

web/sass-files/sass/partials/_post.scss

@@ -11,6 +11,7 @@
 	resize: none;
 	line-height:20px;
 	min-height:36px;
+	overflow-x: hidden;
 	&:focus {
 		border-color: #ccc;
 		box-shadow: none;
@@ -335,7 +336,6 @@ body.ios {
 			padding-top: 8px;
 			padding-right: 28px;
 			max-height: 162px !important;
-			overflow: auto;
 			line-height: 1.5;
 		}
 		.textarea-div {