MM-53524/MM-53525 Clean up post textbox measurement (#23973)

* Don't always render post textbox preview in background

* Remove most usage of custom-textarea--emoji-picker

This class is only needed by the pre-AdvancedTextEditor usage of the
Textbox. It otherwise conflicted with the code that controls the
AdvancedTextEditor's right padding

* Change right padding for post textbox to use CSS class

* Remove AutosizeTextarea.recalculatePadding

This was only needed because we started setting the padding of the
textarea programatically at some point. Originally, we could rely on
the reference textarea having the same styling because it had the same
CSS class as the actual textarea.

* Change reference textarea to a div

Using an actual textarea to measure the size of the text doesn't allow
us to measure the width of the text because textareas don't stretch to
fit text. Using a div with the same styling as the textarea works though

* Remove redundant measuring div from AutosizeTextarea

* Update snapshots for AutosizeTextarea

* Fix padding being counted twice when measuring width

* Change AutosizeTextarea to use a ResizeObserver to be more responsive

* Fix right padding on post preview

* Disable transitions when AutosizeTextarea first measures

* Fix measurement of trailing newlines

* Revert "Disable transitions when AutosizeTextarea first measures"

This reverts commit a036fdbfd64e49af9a2eaa3d3e06a5af453b1a5c.

* Revert "Change AutosizeTextarea to use a ResizeObserver to be more responsive"

This reverts commit c8fa4a19bde087a0fe80e3639aed2f3ae2eae04a.

---------

Co-authored-by: Mattermost Build <build@mattermost.com>

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 {

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;