From 2743339a7edb91400dfcf95b77ee9de882a23330 Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Sun, 31 Jul 2022 23:02:11 -0400
Subject: [PATCH] UX: adjust sidebar margin to avoid composer height (#17731)

---
 .../discourse/app/components/composer-body.js        |  5 +++--
 .../discourse/app/controllers/composer.js            |  8 ++++++++
 app/assets/stylesheets/common/base/compose.scss      | 12 ++----------
 app/assets/stylesheets/common/base/sidebar.scss      |  6 ++++++
 4 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/components/composer-body.js b/app/assets/javascripts/discourse/app/components/composer-body.js
index f189847f1f5..f3436337355 100644
--- a/app/assets/javascripts/discourse/app/components/composer-body.js
+++ b/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();
diff --git a/app/assets/javascripts/discourse/app/controllers/composer.js b/app/assets/javascripts/discourse/app/controllers/composer.js
index 1c183e2e2ae..f315a8218d4 100644
--- a/app/assets/javascripts/discourse/app/controllers/composer.js
+++ b/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;
diff --git a/app/assets/stylesheets/common/base/compose.scss b/app/assets/stylesheets/common/base/compose.scss
index e9d1739cedd..efd401ac173 100644
--- a/app/assets/stylesheets/common/base/compose.scss
+++ b/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 {
diff --git a/app/assets/stylesheets/common/base/sidebar.scss b/app/assets/stylesheets/common/base/sidebar.scss
index d5e35c71ad6..209011472b9 100644
--- a/app/assets/stylesheets/common/base/sidebar.scss
+++ b/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 {