UX: Ensure sticky elements don't overflow header (#14432)

app/assets/javascripts/discourse/app/components/site-header.js

@@ -183,16 +183,21 @@ const SiteHeaderComponent = MountWidget.extend(
       }
 
       const offset = info.offset();
+      const headerRect = header.getBoundingClientRect(),
+        headerOffset = headerRect.top + headerRect.height,
+        doc = document.documentElement;
       if (offset >= this.docAt) {
         if (!this.dockedHeader) {
           document.body.classList.add("docked");
           this.dockedHeader = true;
+          doc.style.setProperty("--header-offset", `${headerOffset}px`);
         }
       } else {
         if (this.dockedHeader) {
           document.body.classList.remove("docked");
           this.dockedHeader = false;
         }
+        doc.style.setProperty("--header-offset", `${headerOffset}px`);
       }
     },
 

app/assets/stylesheets/common/base/_topic-list.scss

@@ -171,8 +171,7 @@
 
 .sticky-header thead {
   @include sticky;
-  // TODO: Use calculated header height
-  top: 60px;
+  top: var(--header-offset, 60px);
   background: var(--secondary);
   z-index: 2;
 }

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

@@ -517,6 +517,7 @@ body:not(.ios-safari-composer-hacks) {
   #reply-control.open {
     --min-height: 255px;
     min-height: var(--min-height);
+    max-height: calc(100vh - var(--header-offset, 4em));
     &.composer-action-reply {
       // we can let the reply composer get a little shorter
       min-height: calc(var(--min-height) - 4em);

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

@@ -46,7 +46,7 @@
       grid-area: timeline;
       align-self: start;
       @include sticky;
-      top: 6em;
+      top: calc(var(--header-offset, 60px) + 2em);
       margin-left: 1em;
       z-index: z("timeline");
     }