diff --git a/routes/_components/status/StatusComposeBox.html b/routes/_components/status/StatusComposeBox.html
index e1bb7665..2af3b87b 100644
--- a/routes/_components/status/StatusComposeBox.html
+++ b/routes/_components/status/StatusComposeBox.html
@@ -9,31 +9,35 @@
 <style>
   .status-article-compose-box {
     grid-area: compose;
+    background: var(--main-bg);
   }
 </style>
 <script>
   import ComposeBox from '../../_components/compose/ComposeBox.html'
   import { store } from '../../_store/store'
-  import { doubleRAF } from '../../_utils/doubleRAF'
+  import debounce from 'lodash/debounce'
+  import throttle from 'lodash/throttle'
+
+  const DEBOUNCE_DELAY = 400
+  const THROTTLE_DELAY = 150
 
   export default {
     oncreate() {
-      let lastContentWarningShown = false
-      this.observe('composeData', composeData => {
-        doubleRAF(() => {
+      const recalc = () => {
+        requestAnimationFrame(() => {
           this.fire('recalculateHeight')
-          let contentWarningShown = !!composeData.contentWarningShown
-          if (contentWarningShown !== lastContentWarningShown) {
-            // TODO: this animation lasts 333ms, hence need to recalculate again
-            setTimeout(() => {
-              requestAnimationFrame(() => {
-                this.fire('recalculateHeight')
-              })
-            }, 350)
-          }
-          lastContentWarningShown = contentWarningShown
         })
-      }, {init: false})
+      }
+      // debounce AND throttle due to 333ms content warning animation
+      const debounced = debounce(recalc, DEBOUNCE_DELAY)
+      const throttled = throttle(() => {
+        debounced()
+        recalc()
+      }, THROTTLE_DELAY, {
+        leading: true,
+        trailing: true
+      })
+      this.observe('composeData', throttled)
     },
     components: {
       ComposeBox