UX: adjust sidebar margin to avoid composer height (#17731)

app/assets/javascripts/discourse/app/components/composer-body.js

@@ -107,8 +107,9 @@ export default Component.extend(KeyEnterEscape, {
     const minHeight = parseInt(getComputedStyle(this.element).minHeight, 10);
     size = Math.max(minHeight, size);
 
-    ["--reply-composer-height", "--new-topic-composer-height"].forEach((prop) =>
-      document.documentElement.style.setProperty(prop, size ? `${size}px` : "")
+    document.documentElement.style.setProperty(
+      "--composer-height",
+      size ? `${size}px` : ""
     );
 
     this._triggerComposerResized();

app/assets/javascripts/discourse/app/controllers/composer.js

@@ -1259,6 +1259,14 @@ export default Controller.extend({
       if (opts.topicBody) {
         this.model.set("reply", opts.topicBody);
       }
+
+      const defaultComposerHeight =
+        this.model.action === "reply" ? "300px" : "400px";
+
+      document.documentElement.style.setProperty(
+        "--composer-height",
+        defaultComposerHeight
+      );
     });
 
     return promise;

app/assets/stylesheets/common/base/compose.scss

@@ -1,10 +1,6 @@
-:root {
-  --reply-composer-height: 300px;
-  --new-topic-composer-height: 400px;
-}
 html.composer-open {
   #main-outlet {
-    padding-bottom: var(--reply-composer-height);
+    padding-bottom: var(--composer-height);
     transition: padding-bottom 250ms ease;
   }
 }
@@ -53,11 +49,7 @@ html.composer-open {
   }
 
   &.open {
-    height: var(--reply-composer-height);
-    &.edit-title {
-      // more room when editing the title
-      height: var(--new-topic-composer-height);
-    }
+    height: var(--composer-height);
   }
 
   &.closed {

app/assets/stylesheets/common/base/sidebar.scss

@@ -60,6 +60,12 @@
     flex: 1;
     display: flex;
     flex-direction: column;
+
+    .composer-open & {
+      // allows sidebar to scroll to the bottom when the composer is open
+      margin-bottom: var(--composer-height);
+      padding-bottom: var(--composer-ipad-padding);
+    }
   }
 
   .sidebar-sections {