From 666498e7b76144b35d245d4b1c09e1dc62fac84b Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 10 Apr 2022 21:54:02 +0300
Subject: fix main post form having hidden emoji picker

---
 src/components/post_status_form/post_status_form.vue | 1 +
 1 file changed, 1 insertion(+)

(limited to 'src/components/post_status_form')

diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 0fdb6dc7..d6595354 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -509,6 +509,7 @@
     flex-direction: column;
     padding: 0.25em 0.5em 0.5em;
     line-height:24px;
+    z-index: 50;
   }
 
   form textarea.form-cw {
-- 
cgit v1.2.3-70-g09d2


From e5f0f95356fcae36310c98571b8ab8df9fbce958 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 11 Apr 2022 00:20:27 +0300
Subject: fix dropzone

---
 src/components/post_status_form/post_status_form.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/components/post_status_form')

diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index d6595354..47b8a213 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -572,7 +572,7 @@
 
   .drop-indicator {
     position: absolute;
-    z-index: 1;
+    z-index: 100;
     width: 100%;
     height: 100%;
     font-size: 5em;
-- 
cgit v1.2.3-70-g09d2


From 2f1f1455aac268a138b0bf6a62d047a07c62e889 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 11 Apr 2022 16:45:16 +0300
Subject: fix notifications scrolling the main column

---
 src/components/post_status_form/post_status_form.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/components/post_status_form')

diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index 84a9e29e..2febf226 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -486,7 +486,7 @@ const PostStatusForm = {
       const bottomBottomPaddingStr = window.getComputedStyle(bottomRef)['padding-bottom']
       const bottomBottomPadding = pxStringToNumber(bottomBottomPaddingStr)
 
-      const scrollerRef = this.$el.closest('.sidebar-scroller') ||
+      const scrollerRef = this.$el.closest('.column.-scrollable') ||
             this.$el.closest('.post-form-modal-view') ||
             window
 
-- 
cgit v1.2.3-70-g09d2


From df18a74adc4dbad7ca0daf38c041f9ac482a29c8 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 11 Apr 2022 23:18:46 +0300
Subject: fixes for z-indexes

---
 src/components/popover/popover.vue                   |  2 +-
 src/components/post_status_form/post_status_form.vue |  4 ++--
 src/panel.scss                                       | 16 +++++-----------
 3 files changed, 8 insertions(+), 14 deletions(-)

(limited to 'src/components/post_status_form')

diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
index 973625d1..91939ee7 100644
--- a/src/components/popover/popover.vue
+++ b/src/components/popover/popover.vue
@@ -69,7 +69,7 @@
   text-align: left;
   list-style: none;
   max-width: 100vw;
-  z-index: 10;
+  z-index: 200;
   white-space: nowrap;
 
   .dropdown-divider {
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 47b8a213..f052e4de 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -509,7 +509,7 @@
     flex-direction: column;
     padding: 0.25em 0.5em 0.5em;
     line-height:24px;
-    z-index: 50;
+    z-index: 10;
   }
 
   form textarea.form-cw {
@@ -572,7 +572,7 @@
 
   .drop-indicator {
     position: absolute;
-    z-index: 100;
+    z-index: 11;
     width: 100%;
     height: 100%;
     font-size: 5em;
diff --git a/src/panel.scss b/src/panel.scss
index 57059cb9..175d2181 100644
--- a/src/panel.scss
+++ b/src/panel.scss
@@ -2,7 +2,6 @@
   position: relative;
   display: flex;
   flex-direction: column;
-  z-index: 0;
   background-color: $fallback--bg;
   background-color: var(--bg, $fallback--bg);
 
@@ -19,7 +18,7 @@
     bottom: 0;
     left: 0;
     right: 0;
-    z-index: 100;
+    z-index: 3;
     box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
     box-shadow: var(--panelShadow);
     pointer-events: none;
@@ -53,7 +52,6 @@
   background-color: var(--bg, $fallback--bg);
   align-items: baseline;
   height: var(--panel-heading-height);
-  z-index: -2;
 
   &.-flexible-height {
     --panel-heading-height: auto;
@@ -90,14 +88,6 @@
     box-shadow: var(--panelHeaderShadow);
   }
 
-  &::before {
-    bottom: -20px;
-    z-index: -1;
-    border-radius: $fallback--panelRadius $fallback--panelRadius 0 0;
-    border-radius: var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius) 0 0;
-    mask: linear-gradient(to bottom, white var(--panel-heading-height), transparent var(--panel-heading-height));
-  }
-
   .title {
     flex: 1 0 auto;
     font-size: 1.3em;
@@ -202,3 +192,7 @@
   padding: 1em;
   margin: 0;
 }
+
+.panel-body {
+  padding: var(--panel-body-padding, 0);
+}
-- 
cgit v1.2.3-70-g09d2


From 0db756b4a55cafb59e8ab5baf721998b7289e937 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 12 Apr 2022 01:22:31 +0300
Subject: fix post form/dropzone for good (?)

---
 src/components/post_status_form/post_status_form.vue | 20 +++++++++-----------
 1 file changed, 9 insertions(+), 11 deletions(-)

(limited to 'src/components/post_status_form')

diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index f052e4de..9f2e8846 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -8,15 +8,6 @@
       @submit.prevent
       @dragover.prevent="fileDrag"
     >
-      <div
-        v-show="showDropIcon !== 'hide'"
-        :style="{ animation: showDropIcon === 'show' ? 'fade-in 0.25s' : 'fade-out 0.5s' }"
-        class="drop-indicator"
-        @dragleave="fileDragStop"
-        @drop.stop="fileDrop"
-      >
-        <FAIcon :icon="uploadFileLimitReached ? 'ban' : 'upload'" />
-      </div>
       <div class="form-group">
         <i18n-t
           v-if="!$store.state.users.currentUser.locked && newStatus.visibility == 'private' && !disableLockWarning"
@@ -277,6 +268,15 @@
           {{ $t('post_status.post') }}
         </button>
       </div>
+      <div
+        v-show="showDropIcon !== 'hide'"
+        :style="{ animation: showDropIcon === 'show' ? 'fade-in 0.25s' : 'fade-out 0.5s' }"
+        class="drop-indicator"
+        @dragleave="fileDragStop"
+        @drop.stop="fileDrop"
+      >
+        <FAIcon :icon="uploadFileLimitReached ? 'ban' : 'upload'" />
+      </div>
       <div
         v-if="error"
         class="alert error"
@@ -509,7 +509,6 @@
     flex-direction: column;
     padding: 0.25em 0.5em 0.5em;
     line-height:24px;
-    z-index: 10;
   }
 
   form textarea.form-cw {
@@ -572,7 +571,6 @@
 
   .drop-indicator {
     position: absolute;
-    z-index: 11;
     width: 100%;
     height: 100%;
     font-size: 5em;
-- 
cgit v1.2.3-70-g09d2


From 58a975e8df0d72ea330a6120195cc9bc374d68ad Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 20 Apr 2022 23:22:51 +0300
Subject: cleanup and fixes

---
 src/App.scss                                       |  2 +-
 src/components/chat/chat.scss                      |  2 +-
 src/components/chat_new/chat_new.scss              |  8 ++++----
 src/components/chat_new/chat_new.vue               |  6 +++---
 src/components/login_form/login_form.vue           |  2 +-
 src/components/media_upload/media_upload.vue       |  2 +-
 .../post_status_form/post_status_form.vue          | 24 +++++++---------------
 src/components/registration/registration.vue       |  6 +++---
 src/components/remote_follow/remote_follow.vue     |  2 +-
 src/components/select/select.vue                   |  6 +++---
 src/components/settings_modal/settings_modal.scss  |  2 +-
 .../settings_modal/tabs/mutes_and_blocks_tab.scss  |  2 +-
 .../settings_modal/tabs/profile_tab.scss           |  2 +-
 .../settings_modal/tabs/theme_tab/theme_tab.scss   |  2 +-
 src/components/tab_switcher/tab_switcher.scss      |  3 ++-
 src/panel.scss                                     |  2 +-
 16 files changed, 32 insertions(+), 41 deletions(-)

(limited to 'src/components/post_status_form')

diff --git a/src/App.scss b/src/App.scss
index bc792263..8c59c77a 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -456,7 +456,7 @@ textarea,
   box-sizing: border-box;
   display: inline-block;
   position: relative;
-  height: 28px;
+  height: 2em;
   line-height: 16px;
   hyphens: none;
   padding: 8px 0.5em;
diff --git a/src/components/chat/chat.scss b/src/components/chat/chat.scss
index 63fd2a1f..1e046300 100644
--- a/src/components/chat/chat.scss
+++ b/src/components/chat/chat.scss
@@ -52,7 +52,7 @@
 
   .go-back-button {
     text-align: center;
-    line-height: 100%;
+    line-height: 1;
     height: 100%;
     align-self: start;
     width: var(--__panel-heading-height-inner);
diff --git a/src/components/chat_new/chat_new.scss b/src/components/chat_new/chat_new.scss
index 5506143d..240e1a38 100644
--- a/src/components/chat_new/chat_new.scss
+++ b/src/components/chat_new/chat_new.scss
@@ -22,10 +22,10 @@
   }
 
   .go-back-button {
-    cursor: pointer;
-    width: 28px;
     text-align: center;
-    padding: 0.6em;
-    margin: -0.6em 0.6em -0.6em -0.6em;
+    line-height: 1;
+    height: 100%;
+    align-self: start;
+    width: var(--__panel-heading-height-inner);
   }
 }
diff --git a/src/components/chat_new/chat_new.vue b/src/components/chat_new/chat_new.vue
index 0790bb37..bf09a379 100644
--- a/src/components/chat_new/chat_new.vue
+++ b/src/components/chat_new/chat_new.vue
@@ -6,15 +6,15 @@
       ref="header"
       class="panel-heading"
     >
-      <a
-        class="go-back-button"
+      <button
+        class="button-unstyled go-back-button"
         @click="goBack"
       >
         <FAIcon
           size="lg"
           icon="chevron-left"
         />
-      </a>
+      </button>
     </div>
     <div class="input-wrap">
       <div class="input-search">
diff --git a/src/components/login_form/login_form.vue b/src/components/login_form/login_form.vue
index 87fa37c6..21482977 100644
--- a/src/components/login_form/login_form.vue
+++ b/src/components/login_form/login_form.vue
@@ -101,7 +101,7 @@
   padding: 0.6em;
 
   .btn {
-    min-height: 28px;
+    min-height: 2em;
     width: 10em;
   }
 
diff --git a/src/components/media_upload/media_upload.vue b/src/components/media_upload/media_upload.vue
index 2920387e..2668a34f 100644
--- a/src/components/media_upload/media_upload.vue
+++ b/src/components/media_upload/media_upload.vue
@@ -32,6 +32,6 @@
 @import '../../_variables.scss';
 
 .media-upload {
-  cursor: pointer;
+  cursor: pointer; // We use <label> for interactivity... i wonder if it's fine
 }
  </style>
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 9f2e8846..657a2710 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -336,7 +336,7 @@
     display: flex;
     justify-content: space-between;
     padding: 0.5em;
-    height: 32px;
+    height: 2.5em;
 
     button {
       width: 10em;
@@ -411,10 +411,12 @@
   }
 
   .media-upload-icon, .poll-icon, .emoji-icon {
-    font-size: 26px;
+    font-size: 1.85em;
     line-height: 1.1;
     flex: 1;
     padding: 0 0.1em;
+    display: flex;
+    align-items: center;
 
     &.selected, &:hover {
       // needs to be specific to override icon default color
@@ -441,21 +443,17 @@
   // Order is not necessary but a good indicator
   .media-upload-icon {
     order: 1;
-    text-align: left;
+    justify-content: left;
   }
 
   .emoji-icon {
     order: 2;
-    text-align: center;
+    justify-content: center;
   }
 
   .poll-icon {
     order: 3;
-    text-align: right;
-  }
-
-  .poll-icon {
-    cursor: pointer;
+    justify-content: right;
   }
 
   .error {
@@ -489,10 +487,6 @@
     flex-direction: column;
   }
 
-  .btn {
-    cursor: pointer;
-  }
-
   .btn[disabled] {
     cursor: not-allowed;
   }
@@ -551,10 +545,6 @@
     }
   }
 
-  .btn {
-    cursor: pointer;
-  }
-
   .btn[disabled] {
     cursor: not-allowed;
   }
diff --git a/src/components/registration/registration.vue b/src/components/registration/registration.vue
index 1e735c69..1c83a47e 100644
--- a/src/components/registration/registration.vue
+++ b/src/components/registration/registration.vue
@@ -297,8 +297,8 @@ $validations-cRed: #f04124;
   .form-group {
     display: flex;
     flex-direction: column;
-    padding: 0.3em 0.0em 0.3em;
-    line-height:24px;
+    padding: 0.3em 0;
+    line-height: 2;
     margin-bottom: 1em;
   }
 
@@ -344,7 +344,7 @@ $validations-cRed: #f04124;
 
   .btn {
     margin-top: 0.6em;
-    height: 28px;
+    height: 2em;
   }
 
   .error {
diff --git a/src/components/remote_follow/remote_follow.vue b/src/components/remote_follow/remote_follow.vue
index be827400..e17aa2e9 100644
--- a/src/components/remote_follow/remote_follow.vue
+++ b/src/components/remote_follow/remote_follow.vue
@@ -32,7 +32,7 @@
 
   .remote-button {
     width: 100%;
-    min-height: 28px;
+    min-height: 2em;
   }
 }
 </style>
diff --git a/src/components/select/select.vue b/src/components/select/select.vue
index ea8c8b69..92493b0b 100644
--- a/src/components/select/select.vue
+++ b/src/components/select/select.vue
@@ -39,10 +39,10 @@ label.Select {
     padding: 0 2em 0 .2em;
     font-family: sans-serif;
     font-family: var(--inputFont, sans-serif);
-    font-size: 14px;
+    font-size: 1em;
     width: 100%;
     z-index: 1;
-    height: 28px;
+    height: 2em;
     line-height: 16px;
   }
 
@@ -55,7 +55,7 @@ label.Select {
     width: 0.875em;
     color: $fallback--text;
     color: var(--inputText, $fallback--text);
-    line-height: 28px;
+    line-height: 2;
     z-index: 0;
     pointer-events: none;
   }
diff --git a/src/components/settings_modal/settings_modal.scss b/src/components/settings_modal/settings_modal.scss
index f3738a8c..13cb0e65 100644
--- a/src/components/settings_modal/settings_modal.scss
+++ b/src/components/settings_modal/settings_modal.scss
@@ -54,7 +54,7 @@
       overflow-y: hidden;
 
       .btn {
-        min-height: 28px;
+        min-height: 2em;
         min-width: 10em;
         padding: 0 2em;
       }
diff --git a/src/components/settings_modal/tabs/mutes_and_blocks_tab.scss b/src/components/settings_modal/tabs/mutes_and_blocks_tab.scss
index ceb64efb..2adff847 100644
--- a/src/components/settings_modal/tabs/mutes_and_blocks_tab.scss
+++ b/src/components/settings_modal/tabs/mutes_and_blocks_tab.scss
@@ -8,7 +8,7 @@
     .bulk-actions {
         text-align: right;
         padding: 0 1em;
-        min-height: 28px;
+        min-height: 2em;
     }
 
     .bulk-action-button {
diff --git a/src/components/settings_modal/tabs/profile_tab.scss b/src/components/settings_modal/tabs/profile_tab.scss
index 3c9683cd..201f1a76 100644
--- a/src/components/settings_modal/tabs/profile_tab.scss
+++ b/src/components/settings_modal/tabs/profile_tab.scss
@@ -89,7 +89,7 @@
   &-bulk-actions {
     text-align: right;
     padding: 0 1em;
-    min-height: 28px;
+    min-height: 2em;
 
     button {
       width: 10em;
diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.scss b/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
index cb8e477c..bad6f51b 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
@@ -325,7 +325,7 @@
 
     .btn {
       flex-grow: 1;
-      min-height: 28px;
+      min-height: 2em;
       min-width: 0;
       max-width: 10em;
       padding: 0;
diff --git a/src/components/tab_switcher/tab_switcher.scss b/src/components/tab_switcher/tab_switcher.scss
index 575d41e1..7a086b26 100644
--- a/src/components/tab_switcher/tab_switcher.scss
+++ b/src/components/tab_switcher/tab_switcher.scss
@@ -25,8 +25,9 @@
         border-bottom-color: $fallback--border;
         border-bottom-color: var(--border, $fallback--border);
       }
+
       .tab-wrapper {
-        height: 28px;
+        height: 2em;
 
         &:not(.active)::after {
           left: 0;
diff --git a/src/panel.scss b/src/panel.scss
index 167c60a6..637ea17c 100644
--- a/src/panel.scss
+++ b/src/panel.scss
@@ -176,7 +176,7 @@
   flex: none;
   padding: 0.6em 0.6em;
   text-align: left;
-  line-height: 28px;
+  line-height: 2;
   align-items: baseline;
   border-width: 1px 0 0 0;
   border-style: solid;
-- 
cgit v1.2.3-70-g09d2


From cd021bc6df8360d3b1ae71284255f81ccb1b8a85 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 21 Apr 2022 19:57:00 +0300
Subject: cleanup & more fixes for alignments and sizing

---
 src/components/post_status_form/post_status_form.vue | 15 +++------------
 1 file changed, 3 insertions(+), 12 deletions(-)

(limited to 'src/components/post_status_form')

diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 657a2710..ebeead07 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -408,6 +408,7 @@
     display: flex;
     justify-content: space-between;
     padding-top: 5px;
+    align-items: baseline;
   }
 
   .media-upload-icon, .poll-icon, .emoji-icon {
@@ -502,25 +503,15 @@
     display: flex;
     flex-direction: column;
     padding: 0.25em 0.5em 0.5em;
-    line-height:24px;
-  }
-
-  form textarea.form-cw {
-    line-height:16px;
-    resize: none;
-    overflow: hidden;
-    transition: min-height 200ms 100ms;
-    min-height: 1px;
+    line-height: 1.85em;
   }
 
   .form-post-body {
-    height: 16px; // Only affects the empty-height
-    line-height: 16px;
     resize: none;
     overflow: hidden;
     transition: min-height 200ms 100ms;
     padding-bottom: 1.75em;
-    min-height: 1px;
+    min-height: 2em;
     box-sizing: content-box;
 
     &.scrollable-form {
-- 
cgit v1.2.3-70-g09d2


From 318c62c8526f2513f9760dba9ccc48d8c27c7645 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 26 Apr 2022 00:07:51 +0300
Subject: reduce height of post form by default

---
 src/App.scss                                         |  6 ++++--
 src/components/post_status_form/post_status_form.vue | 10 ++++++----
 2 files changed, 10 insertions(+), 6 deletions(-)

(limited to 'src/components/post_status_form')

diff --git a/src/App.scss b/src/App.scss
index 3d30ec79..3a0204d1 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -440,6 +440,8 @@ textarea,
     height: unset;
   }
 
+  --padding: 0.5em;
+
   border: none;
   border-radius: $fallback--inputRadius;
   border-radius: var(--inputRadius, $fallback--inputRadius);
@@ -456,10 +458,10 @@ textarea,
   box-sizing: border-box;
   display: inline-block;
   position: relative;
-  height: 2em;
+  height: 2.4em;
   line-height: 1.2;
   hyphens: none;
-  padding: 8px 0.5em;
+  padding: var(--padding);
 
   &:disabled,
   &[disabled=disabled],
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index ebeead07..a967d3a3 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -507,12 +507,14 @@
   }
 
   .form-post-body {
-    resize: none;
+    box-sizing: content-box;
     overflow: hidden;
     transition: min-height 200ms 100ms;
-    padding-bottom: 1.75em;
-    min-height: 2em;
-    box-sizing: content-box;
+    padding-bottom: calc(var(--padding) + 1.2em);
+    // Because we changed box-sizing original height values are no longer correct
+    height: 1.2em;
+    min-height: 1.2em;
+    resize: none;
 
     &.scrollable-form {
       overflow-y: auto;
-- 
cgit v1.2.3-70-g09d2


From 079e289260bfdf0ac8804f43b09f0c14c5338f5d Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 26 Apr 2022 17:31:26 +0300
Subject: improvements and cleanup to input components

---
 src/App.scss                                              | 14 ++++++++++----
 src/components/chat_list_item/chat_list_item.scss         |  4 ++--
 src/components/notifications/notifications.scss           |  2 +-
 src/components/post_status_form/post_status_form.vue      | 15 ++++++++-------
 src/components/status_body/status_body.scss               |  4 ++--
 .../user_reporting_modal/user_reporting_modal.vue         |  2 +-
 6 files changed, 24 insertions(+), 17 deletions(-)

(limited to 'src/components/post_status_form')

diff --git a/src/App.scss b/src/App.scss
index 3a0204d1..3ea31b97 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -3,6 +3,7 @@
 
 :root {
   --navbar-height: 3.5rem;
+  --post-line-height: 1.4;
 }
 
 html {
@@ -440,7 +441,7 @@ textarea,
     height: unset;
   }
 
-  --padding: 0.5em;
+  --_padding: 0.5em;
 
   border: none;
   border-radius: $fallback--inputRadius;
@@ -458,10 +459,9 @@ textarea,
   box-sizing: border-box;
   display: inline-block;
   position: relative;
-  height: 2.4em;
-  line-height: 1.2;
+  line-height: 2;
   hyphens: none;
-  padding: var(--padding);
+  padding: 0 var(--_padding);
 
   &:disabled,
   &[disabled=disabled],
@@ -563,6 +563,12 @@ textarea,
   }
 }
 
+// Textareas should have stock line-height + vertical padding instead of huge line-height
+textarea {
+  padding: var(--_padding);
+  line-height: var(--post-line-height);
+}
+
 option {
   color: $fallback--text;
   color: var(--text, $fallback--text);
diff --git a/src/components/chat_list_item/chat_list_item.scss b/src/components/chat_list_item/chat_list_item.scss
index 57332bed..c6b45c34 100644
--- a/src/components/chat_list_item/chat_list_item.scss
+++ b/src/components/chat_list_item/chat_list_item.scss
@@ -43,7 +43,7 @@
     white-space: nowrap;
     overflow: hidden;
     flex-shrink: 1;
-    line-height: 1.4em;
+    line-height: var(--post-line-height);
   }
 
   .chat-preview {
@@ -82,7 +82,7 @@
   }
 
   .time-wrapper {
-    line-height: 1.4em;
+    line-height: var(--post-line-height);
   }
 
   .chat-preview-body {
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index 07abee27..3d3408f7 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -119,7 +119,7 @@
   .notification-details {
     min-width: 0;
     word-wrap: break-word;
-    line-height: 1.4;
+    line-height: var(--post-line-height);
     position: relative;
     overflow: hidden;
     width: 100%;
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index a967d3a3..62613bd1 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -394,7 +394,6 @@
     border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
     padding: 0.5em;
     margin: 0;
-    line-height: 1.4em;
   }
 
   .text-format {
@@ -503,17 +502,19 @@
     display: flex;
     flex-direction: column;
     padding: 0.25em 0.5em 0.5em;
-    line-height: 1.85em;
+    line-height: 1.85;
   }
 
   .form-post-body {
-    box-sizing: content-box;
+    // TODO: make a resizable textarea component?
+    box-sizing: content-box; // needed for easier computation of dynamic size
     overflow: hidden;
     transition: min-height 200ms 100ms;
-    padding-bottom: calc(var(--padding) + 1.2em);
-    // Because we changed box-sizing original height values are no longer correct
-    height: 1.2em;
-    min-height: 1.2em;
+    // stock padding + 1 line of text (for counter)
+    padding-bottom: calc(var(--_padding) + var(--post-line-height) * 1em);
+    // two lines of text
+    height: calc(var(--post-line-height) * 1em);
+    min-height: calc(var(--post-line-height) * 1em);
     resize: none;
 
     &.scrollable-form {
diff --git a/src/components/status_body/status_body.scss b/src/components/status_body/status_body.scss
index f261108e..1c1ecea2 100644
--- a/src/components/status_body/status_body.scss
+++ b/src/components/status_body/status_body.scss
@@ -19,7 +19,7 @@
     overflow-wrap: break-word;
     word-wrap: break-word;
     word-break: break-word;
-    line-height: 1.4em;
+    line-height: var(--post-line-height);
   }
 
   .summary {
@@ -33,7 +33,7 @@
       white-space: nowrap;
       text-overflow: ellipsis;
       overflow: hidden;
-      height: 1.4em;
+      height: 1.4;
     }
   }
 
diff --git a/src/components/user_reporting_modal/user_reporting_modal.vue b/src/components/user_reporting_modal/user_reporting_modal.vue
index ba12a246..030ce2c4 100644
--- a/src/components/user_reporting_modal/user_reporting_modal.vue
+++ b/src/components/user_reporting_modal/user_reporting_modal.vue
@@ -87,7 +87,7 @@
 
   &-left {
     padding: 1.1em 0.7em 0.7em;
-    line-height: 1.4em;
+    line-height: var(--post-line-height);
     box-sizing: border-box;
 
     > div {
-- 
cgit v1.2.3-70-g09d2