navbar_alerts: Adjust app based on navbar height.

templates/zerver/app/index.html

@@ -104,7 +104,6 @@
     text-decoration: underline;
     }
 </style>
-<style id="sticky_message_header_styles"></style>
 {% endblock %}
 
 {% block content %}

web/src/navbar_alerts.js

@@ -23,9 +23,11 @@ import * as util from "./util";
 /* This is called by resize.js, and thus indirectly when we trigger
  * resize events in the logic below. */
 export function resize_app() {
-    const navbar_alerts_wrapper_height = $("#navbar_alerts_wrapper").height();
-    $("body > .app").height("calc(100% - " + navbar_alerts_wrapper_height + "px)");
-    $(".recent_topics_container").height("calc(100vh - " + navbar_alerts_wrapper_height + "px)");
+    const navbar_alerts_height = $("#navbar_alerts_wrapper").height();
+    document.documentElement.style.setProperty(
+        "--navbar-alerts-wrapper-height",
+        navbar_alerts_height + "px",
+    );
 
     // If the compose-box is in expanded state,
     // reset its height as well.

web/src/resize.js

@@ -14,16 +14,13 @@ import * as util from "./util";
 function get_new_heights() {
     const res = {};
     const viewport_height = message_viewport.height();
-    const top_navbar_height = $("#top_navbar").safeOuterHeight(true);
     const right_sidebar_shortcuts_height = $(".right-sidebar-shortcuts").safeOuterHeight(true) || 0;
 
     res.bottom_whitespace_height = viewport_height * 0.4;
 
-    res.main_div_min_height = viewport_height - top_navbar_height;
-
     res.stream_filters_max_height =
         viewport_height -
-        Number.parseInt($("#left-sidebar").css("marginTop"), 10) -
+        Number.parseInt($("#left-sidebar").css("paddingTop"), 10) -
         Number.parseInt($(".narrows_panel").css("marginTop"), 10) -
         Number.parseInt($(".narrows_panel").css("marginBottom"), 10) -
         $("#global_filters").safeOuterHeight(true) -
@@ -36,7 +33,7 @@ function get_new_heights() {
 
     const usable_height =
         viewport_height -
-        Number.parseInt($("#right-sidebar").css("marginTop"), 10) -
+        Number.parseInt($("#right-sidebar").css("paddingTop"), 10) -
         $("#userlist-header").safeOuterHeight(true) -
         $("#user_search_section").safeOuterHeight(true) -
         right_sidebar_shortcuts_height;
@@ -145,19 +142,8 @@ export function resize_sidebars() {
     return h;
 }
 
-export function reposition_message_header() {
-    // Since `navbar_alerts_wrapper`'s height can vary based on text / language, we
-    // need to adjust at what `top` position do `message-header` becomes `sticky`.
-    // Best way to do this is via adding custom CSS to the DOM instead of running endless
-    // javascript queries to find and update them on various re-renders.
-    const navbar_fixed_height = $("#navbar-fixed-container").safeOuterHeight(true);
-    const style = document.querySelector("#sticky_message_header_styles");
-    style.textContent = `.message_list .message_header { top: ${navbar_fixed_height}px !important; }`;
-}
-
 export function resize_page_components() {
     navbar_alerts.resize_app();
-    reposition_message_header();
     const h = resize_sidebars();
     resize_bottom_whitespace(h);
 }

web/styles/recent_topics.css

@@ -16,7 +16,6 @@
         border-color: hsl(0deg 0% 88%);
         border-width: 0 1px;
         border-radius: 0;
-        margin-top: 40px;
         /* To make the table span full height
          * when rows don't reach bottom of the
          * window. This makes the border span

web/styles/zulip.css

@@ -44,6 +44,15 @@ body {
         --header-height: 30px;
     }
 
+    /*
+    Since #navbar_alerts_wrapper can take variable height depending upon
+    window width / language, we sync its height in navbar_alerts.js
+    */
+    --navbar-alerts-wrapper-height: 0px;
+    --navbar-fixed-height: calc(
+        var(--header-height) + var(--navbar-alerts-wrapper-height)
+    );
+
     /*
     We have a 10px gutter below the header,
     which often needs to be respected by both
@@ -56,7 +65,6 @@ body {
     Our sidebars (and anything that top-align
     with them) go beneath the header.
     */
-    --sidebar-top: calc(var(--header-height) + var(--header-padding-bottom));
     --left-sidebar-collapse-widget-gutter: 10px;
     --left-sidebar-width: 270px;
     --right-sidebar-width: 250px;
@@ -490,6 +498,10 @@ p.n-margin {
     }
 }
 
+.recent_topics_container #recent_topics_table {
+    margin-top: var(--navbar-fixed-height);
+}
+
 .app {
     width: 100%;
     height: 100%;
@@ -584,6 +596,14 @@ p.n-margin {
     top: 0;
 }
 
+#message_feed_container,
+.column-left .left-sidebar,
+.column-right .right-sidebar {
+    padding-top: calc(
+        var(--navbar-fixed-height) + var(--header-padding-bottom)
+    );
+}
+
 .app-main {
     height: 100%;
     min-height: 100%;
@@ -591,7 +611,6 @@ p.n-margin {
     .column-left .left-sidebar,
     .column-right .right-sidebar {
         position: fixed;
-        margin-top: var(--sidebar-top);
         z-index: 100;
     }
 
@@ -1272,7 +1291,7 @@ td.pointer {
 
     .message_header {
         position: sticky;
-        top: var(--header-height);
+        top: var(--navbar-fixed-height);
         /* Needs to be higher than the z-index of date_row. */
         z-index: 4;
         box-shadow: 0 -1px 0 0 var(--color-background);
@@ -2670,10 +2689,6 @@ select.invite-as {
     margin-left: -15px;
 }
 
-#message_feed_container {
-    padding-top: var(--sidebar-top);
-}
-
 .screen {
     position: absolute;
     left: 0;
@@ -2809,12 +2824,8 @@ select.invite-as {
             .right-sidebar {
                 box-shadow: 0 -2px 3px 0 hsl(0deg 0% 0% / 10%);
                 border-left: 1px solid hsl(0deg 0% 87%);
-
-                /* We use both margin and padding to
-                   hide little artifacts from showing up in
-                   the gutter below the navbar. */
-                margin-top: var(--header-height);
-                padding: var(--header-padding-bottom) 15px 0 15px;
+                padding-right: 15px;
+                padding-left: 15px;
                 height: 100%;
                 right: 0;
                 background-color: var(--color-background);
@@ -2872,13 +2883,6 @@ select.invite-as {
                 background-color: var(--color-background);
                 box-shadow: 0 2px 3px 0 hsl(0deg 0% 0% / 10%);
                 border-right: 1px solid hsl(0deg 0% 87%);
-
-                /* We use both margin and padding to
-                   hide little artifacts from showing up in
-                   the gutter below the navbar. */
-                margin-top: var(--header-height);
-                padding-top: var(--header-padding-bottom);
-
                 height: 100%;
                 padding-left: 10px;
                 width: var(--left-sidebar-width);
@@ -2991,10 +2995,6 @@ select.invite-as {
         border: none !important;
     }
 
-    #floating_recipient_bar {
-        top: var(--sidebar-top);
-    }
-
     .message_content {
         padding-right: 50px;
     }