diff --git a/webapp/channels/src/components/__snapshots__/autosize_textarea.test.tsx.snap b/webapp/channels/src/components/__snapshots__/autosize_textarea.test.tsx.snap
index 3bda56384f..5b4e3eae43 100644
--- a/webapp/channels/src/components/__snapshots__/autosize_textarea.test.tsx.snap
+++ b/webapp/channels/src/components/__snapshots__/autosize_textarea.test.tsx.snap
@@ -35,24 +35,15 @@ exports[`components/AutosizeTextarea should match snapshot, init 1`] = `
       }
     }
   >
-    <textarea
+    <div
       aria-hidden={true}
       dir="auto"
       disabled={true}
       id="autosize_textarea-reference"
-      rows={1}
-      style={
-        Object {
-          "height": "auto",
-          "width": "100%",
-        }
-      }
-    />
-    <div
-      id="autosize_textarea-measuring"
       style={
         Object {
           "display": "inline-block",
+          "height": "auto",
           "width": "auto",
         }
       }
diff --git a/webapp/channels/src/components/__snapshots__/textbox.test.tsx.snap b/webapp/channels/src/components/__snapshots__/textbox.test.tsx.snap
index 6d485b9b5c..943bc10dd0 100644
--- a/webapp/channels/src/components/__snapshots__/textbox.test.tsx.snap
+++ b/webapp/channels/src/components/__snapshots__/textbox.test.tsx.snap
@@ -2,97 +2,8 @@
 
 exports[`components/TextBox should match snapshot with additional, optional props 1`] = `
 <div
-  className="textarea-wrapper textarea-wrapper--preview"
+  className="textarea-wrapper"
 >
-  <Connect(SuggestionBox)
-    channelId="channelId"
-    className="form-control custom-textarea custom-textarea--emoji-picker bad-connection custom-textarea--preview"
-    contextId="channelId"
-    disabled={true}
-    id="someid"
-    inputComponent={
-      Object {
-        "$$typeof": Symbol(react.forward_ref),
-        "render": [Function],
-      }
-    }
-    listComponent={[Function]}
-    listPosition="top"
-    onBlur={[Function]}
-    onChange={[Function]}
-    onComposition={[Function]}
-    onHeightChange={[Function]}
-    onKeyDown={[Function]}
-    onKeyPress={[Function]}
-    onKeyUp={[Function]}
-    onMouseUp={[Function]}
-    openWhenEmpty={true}
-    placeholder="placeholder text"
-    providers={
-      Array [
-        AtMentionProvider {
-          "addLastViewAtToProfiles": [Function],
-          "autocompleteGroups": Array [
-            Object {
-              "id": "gid1",
-            },
-            Object {
-              "id": "gid2",
-            },
-          ],
-          "autocompleteUsersInChannel": [Function],
-          "channelId": "channelId",
-          "currentUserId": "currentUserId",
-          "data": null,
-          "disableDispatches": false,
-          "forceDispatch": false,
-          "getProfilesInChannel": [Function],
-          "lastCompletedWord": "",
-          "lastPrefixWithNoResults": "",
-          "latestComplete": true,
-          "latestPrefix": "",
-          "priorityProfiles": undefined,
-          "requestStarted": false,
-          "searchAssociatedGroupsForReference": [Function],
-          "triggerCharacter": "@",
-          "useChannelMentions": true,
-        },
-        ChannelMentionProvider {
-          "autocompleteChannels": [MockFunction],
-          "delayChannelAutocomplete": false,
-          "disableDispatches": false,
-          "forceDispatch": false,
-          "lastCompletedWord": "",
-          "lastPrefixTrimmed": "",
-          "lastPrefixWithNoResults": "",
-          "latestComplete": true,
-          "latestPrefix": "",
-          "requestStarted": false,
-          "triggerCharacter": "~",
-        },
-        EmoticonProvider {
-          "disableDispatches": false,
-          "forceDispatch": false,
-          "latestComplete": true,
-          "latestPrefix": "",
-          "requestStarted": false,
-          "triggerCharacter": ":",
-        },
-      ]
-    }
-    renderDividers={
-      Array [
-        "all",
-      ]
-    }
-    spellCheck="true"
-    style={
-      Object {
-        "visibility": "hidden",
-      }
-    }
-    value="some test text"
-  />
   <div
     className="form-control custom-textarea textbox-preview-area"
     onBlur={[Function]}
diff --git a/webapp/channels/src/components/advanced_text_editor/advanced_text_editor.scss b/webapp/channels/src/components/advanced_text_editor/advanced_text_editor.scss
index 7fc17a7fa2..2bd7f26396 100644
--- a/webapp/channels/src/components/advanced_text_editor/advanced_text_editor.scss
+++ b/webapp/channels/src/components/advanced_text_editor/advanced_text_editor.scss
@@ -27,19 +27,33 @@
     .custom-textarea {
         // fix for a miscalculation due to the heavily overwritten custom-textarea class
         height: 0;
+        padding-right: calc(16px + var(--right-padding-for-scrollbar) + var(--right-padding-for-preview-button));
         box-shadow: none;
 
         &:focus {
             box-shadow: none;
         }
 
-        &.custom-textarea--emoji-picker,
         &.textbox-preview-area {
             height: auto;
-            padding-right: 16px;
         }
     }
 
+    /* stylelint-disable length-zero-no-unit */
+    --right-padding-for-scrollbar: 0px;
+    --right-padding-for-preview-button: 0px;
+    /* stylelint-enable length-zero-no-unit */
+
+    &.scroll {
+        --right-padding-for-scrollbar: 8px;
+    }
+
+    // With the formatting bar disabled, leave room on the right for the post controls until the text takes up
+    // multiple lines. At that point, leave space below the text as if the controls were still there.
+    &.formatting-bar {
+        --right-padding-for-preview-button: 32px;
+    }
+
     &__body {
         position: relative;
         max-width: 100%;
diff --git a/webapp/channels/src/components/advanced_text_editor/advanced_text_editor.tsx b/webapp/channels/src/components/advanced_text_editor/advanced_text_editor.tsx
index 89d6f71a16..439fb2e4e4 100644
--- a/webapp/channels/src/components/advanced_text_editor/advanced_text_editor.tsx
+++ b/webapp/channels/src/components/advanced_text_editor/advanced_text_editor.tsx
@@ -359,12 +359,7 @@ const AdvanceTextEditor = ({
             return;
         }
 
-        const inputPaddingLeft = parseInt(window.getComputedStyle(input, null).paddingLeft || '0', 10);
-        const inputPaddingRight = parseInt(window.getComputedStyle(input, null).paddingRight || '0', 10);
-        const inputPaddingX = inputPaddingLeft + inputPaddingRight;
-        const currentWidth = width + inputPaddingX;
-
-        if (currentWidth >= maxWidth) {
+        if (width >= maxWidth) {
             setShowFormattingSpacer(true);
         } else {
             setShowFormattingSpacer(false);
@@ -377,22 +372,6 @@ const AdvanceTextEditor = ({
         }
     }, [handleWidthChange, message]);
 
-    useEffect(() => {
-        if (!input) {
-            return;
-        }
-
-        let padding = 16;
-        if (showFormattingBar) {
-            padding += 32;
-        }
-        if (renderScrollbar) {
-            padding += 8;
-        }
-
-        input.style.paddingRight = `${padding}px`;
-    }, [showFormattingBar, renderScrollbar, input]);
-
     const formattingBar = (
         <AutoHeightSwitcher
             showSlot={showFormattingBar ? 1 : 2}
@@ -417,6 +396,7 @@ const AdvanceTextEditor = ({
                 className={classNames('AdvancedTextEditor', {
                     'AdvancedTextEditor__attachment-disabled': !canUploadFiles,
                     scroll: renderScrollbar,
+                    'formatting-bar': showFormattingBar,
                 })}
             >
                 <div
diff --git a/webapp/channels/src/components/autosize_textarea.tsx b/webapp/channels/src/components/autosize_textarea.tsx
index 36d89c97e8..641da8c4f2 100644
--- a/webapp/channels/src/components/autosize_textarea.tsx
+++ b/webapp/channels/src/components/autosize_textarea.tsx
@@ -6,6 +6,7 @@ import type {ChangeEvent, FormEvent, CSSProperties} from 'react';
 
 type Props = {
     id?: string;
+    className?: string;
     disabled?: boolean;
     value?: string;
     defaultValue?: string;
@@ -21,8 +22,7 @@ export class AutosizeTextarea extends React.PureComponent<Props> {
     private height: number;
 
     private textarea?: HTMLTextAreaElement;
-    private referenceRef: React.RefObject<HTMLTextAreaElement>;
-    private measuringRef: React.RefObject<HTMLDivElement>;
+    private referenceRef: React.RefObject<HTMLDivElement>;
 
     constructor(props: Props) {
         super(props);
@@ -30,7 +30,6 @@ export class AutosizeTextarea extends React.PureComponent<Props> {
         this.height = 0;
 
         this.referenceRef = React.createRef();
-        this.measuringRef = React.createRef();
     }
 
     componentDidMount() {
@@ -41,7 +40,6 @@ export class AutosizeTextarea extends React.PureComponent<Props> {
     componentDidUpdate() {
         this.recalculateHeight();
         this.recalculateWidth();
-        this.recalculatePadding();
     }
 
     private recalculateHeight = () => {
@@ -64,25 +62,12 @@ export class AutosizeTextarea extends React.PureComponent<Props> {
         }
     };
 
-    private recalculatePadding = () => {
-        if (!this.referenceRef.current || !this.textarea) {
-            return;
-        }
-
-        const textarea = this.textarea;
-        const {paddingRight} = getComputedStyle(textarea);
-
-        if (paddingRight && paddingRight !== this.referenceRef.current.style.paddingRight) {
-            this.referenceRef.current.style.paddingRight = paddingRight;
-        }
-    };
-
     private recalculateWidth = () => {
-        if (!this.measuringRef) {
+        if (!this.referenceRef) {
             return;
         }
 
-        const width = this.measuringRef.current?.offsetWidth || -1;
+        const width = this.referenceRef.current?.offsetWidth || -1;
         if (width >= 0) {
             window.requestAnimationFrame(() => {
                 this.props.onWidthChange?.(width);
@@ -154,6 +139,18 @@ export class AutosizeTextarea extends React.PureComponent<Props> {
             );
         }
 
+        let referenceValue = value || defaultValue;
+        if (referenceValue?.endsWith('\n')) {
+            // In a div, the browser doesn't always count characters at the end of a line when measuring the dimensions
+            // of text. In the spec, they refer to those characters as "hanging". No matter what value we set for the
+            // `white-space` of a div, a single newline at the end of the div will always hang.
+            //
+            // The textarea doesn't have that behaviour, so we need to trick the reference div into measuring that
+            // newline, and it seems like the best way to do that is by adding a second newline because only the final
+            // one hangs.
+            referenceValue += '\n';
+        }
+
         return (
             <div>
                 {textareaPlaceholder}
@@ -173,23 +170,16 @@ export class AutosizeTextarea extends React.PureComponent<Props> {
                     defaultValue={defaultValue}
                 />
                 <div style={styles.container}>
-                    <textarea
+                    <div
                         ref={this.referenceRef}
                         id={id + '-reference'}
+                        className={otherProps.className}
                         style={styles.reference}
                         dir='auto'
                         disabled={true}
-                        rows={1}
-                        {...otherProps}
-                        value={value || defaultValue}
                         aria-hidden={true}
-                    />
-                    <div
-                        ref={this.measuringRef}
-                        id={id + '-measuring'}
-                        style={styles.measuring}
                     >
-                        {value || defaultValue}
+                        {referenceValue}
                     </div>
                 </div>
             </div>
@@ -199,9 +189,8 @@ export class AutosizeTextarea extends React.PureComponent<Props> {
 
 const styles: { [Key: string]: CSSProperties} = {
     container: {height: 0, overflow: 'hidden'},
-    reference: {height: 'auto', width: '100%'},
+    reference: {display: 'inline-block', height: 'auto', width: 'auto'},
     placeholder: {overflow: 'hidden', textOverflow: 'ellipsis', opacity: 0.5, pointerEvents: 'none', position: 'absolute', whiteSpace: 'nowrap', background: 'none', borderColor: 'transparent'},
-    measuring: {width: 'auto', display: 'inline-block'},
 };
 
 const forwarded = React.forwardRef<HTMLTextAreaElement>((props, ref) => (
diff --git a/webapp/channels/src/components/textbox/textbox.tsx b/webapp/channels/src/components/textbox/textbox.tsx
index d455bd41d0..a148328f34 100644
--- a/webapp/channels/src/components/textbox/textbox.tsx
+++ b/webapp/channels/src/components/textbox/textbox.tsx
@@ -263,10 +263,7 @@ export default class Textbox extends React.PureComponent<Props> {
     };
 
     render() {
-        let preview = null;
-
         let textboxClassName = 'form-control custom-textarea';
-        let textWrapperClass = 'textarea-wrapper';
         if (this.props.emojiEnabled) {
             textboxClassName += ' custom-textarea--emoji-picker';
         }
@@ -276,25 +273,28 @@ export default class Textbox extends React.PureComponent<Props> {
         if (this.props.hasLabels) {
             textboxClassName += ' textarea--has-labels';
         }
-        if (this.props.preview) {
-            textboxClassName += ' custom-textarea--preview';
-            textWrapperClass += ' textarea-wrapper--preview';
 
-            preview = (
+        if (this.props.preview) {
+            return (
                 <div
-                    tabIndex={this.props.tabIndex || 0}
-                    ref={this.preview}
-                    className={classNames('form-control custom-textarea textbox-preview-area', {'textarea--has-labels': this.props.hasLabels})}
-                    onKeyPress={this.props.onKeyPress}
-                    onKeyDown={this.handleKeyDown}
-                    onBlur={this.handleBlur}
+                    ref={this.wrapper}
+                    className='textarea-wrapper'
                 >
-                    <PostMarkdown
-                        message={this.props.value}
-                        mentionKeys={[]}
-                        channelId={this.props.channelId}
-                        imageProps={{hideUtilities: true}}
-                    />
+                    <div
+                        tabIndex={this.props.tabIndex || 0}
+                        ref={this.preview}
+                        className={classNames('form-control custom-textarea textbox-preview-area', {'textarea--has-labels': this.props.hasLabels})}
+                        onKeyPress={this.props.onKeyPress}
+                        onKeyDown={this.handleKeyDown}
+                        onBlur={this.handleBlur}
+                    >
+                        <PostMarkdown
+                            message={this.props.value}
+                            mentionKeys={[]}
+                            channelId={this.props.channelId}
+                            imageProps={{hideUtilities: true}}
+                        />
+                    </div>
                 </div>
             );
         }
@@ -302,7 +302,7 @@ export default class Textbox extends React.PureComponent<Props> {
         return (
             <div
                 ref={this.wrapper}
-                className={textWrapperClass}
+                className='textarea-wrapper'
             >
                 <SuggestionBox
                     id={this.props.id}
@@ -334,7 +334,6 @@ export default class Textbox extends React.PureComponent<Props> {
                     openWhenEmpty={this.props.openWhenEmpty}
                     alignWithTextbox={this.props.alignWithTextbox}
                 />
-                {preview}
             </div>
         );
     }
diff --git a/webapp/channels/src/sass/components/_post.scss b/webapp/channels/src/sass/components/_post.scss
index 89bd04875a..3836424846 100644
--- a/webapp/channels/src/sass/components/_post.scss
+++ b/webapp/channels/src/sass/components/_post.scss
@@ -13,7 +13,7 @@
         line-height: 20px;
         resize: none;
         transition: none;
-        white-space: pre-wrap;
+        white-space: break-spaces;
         word-wrap: break-word;
 
         &:focus {
@@ -31,14 +31,6 @@
     position: relative;
     min-height: 37px;
 
-    &.textarea-wrapper--preview {
-        > div {
-            &:first-child {
-                display: none;
-            }
-        }
-    }
-
     .textbox-preview-area {
         ul {
             white-space: normal;
@@ -384,14 +376,6 @@
         scrollbar-width: thin;
         transition: height 150ms ease-in-out;
 
-        &:not(.custom-textarea--emoji-picker) {
-            padding-right: 40px;
-        }
-
-        &.custom-textarea--emoji-picker {
-            padding-right: 90px;
-        }
-
         &.textbox-preview-area {
             overflow-y: auto;
         }
@@ -412,14 +396,6 @@
             overflow: auto;
             -webkit-overflow-scrolling: touch;
             -ms-overflow-style: auto;
-
-            &:not(.custom-textarea--emoji-picker) {
-                padding-right: 50px;
-            }
-
-            &.custom-textarea--emoji-picker {
-                padding-right: 90px;
-            }
         }
     }
 
@@ -696,7 +672,7 @@
 
         .custom-textarea {
             max-height: calc(50vh - 40px);
-            padding: 13px 0 12px 16px;
+            padding: 13px 16px 12px 16px;
             background-color: var(--center-channel-bg);
 
             &.custom-textarea--emoji-picker {
diff --git a/webapp/channels/src/sass/responsive/_mobile.scss b/webapp/channels/src/sass/responsive/_mobile.scss
index 3ab1e421f3..e56b71a287 100644
--- a/webapp/channels/src/sass/responsive/_mobile.scss
+++ b/webapp/channels/src/sass/responsive/_mobile.scss
@@ -757,13 +757,6 @@
                 display: block;
             }
 
-            .custom-textarea {
-                &.custom-textarea--emoji-picker {
-                    max-height: 162px;
-                    padding-right: 135px;
-                }
-            }
-
             textarea {
                 .app-content & {
                     border-right: none;