From b33438eb55739c4a1f31ff234bb8f4428c79f373 Mon Sep 17 00:00:00 2001
From: Aman Agrawal <amanagr@zulip.com>
Date: Fri, 28 Apr 2023 16:07:06 +0000
Subject: [PATCH] css: Move `10px` navbar bottom padding above message header.

This is a more natural place for this extra padding than below the
navbar. Padding below navbar was primarily needed to hide the
message content above the sticky header while scrolling the message feed.
We are still able to do with this change without partially hiding the
loading message indicator.

Fixes #25159
---
 web/src/message_list_view.js |  2 +-
 web/src/recent_topics_ui.js  |  3 ---
 web/styles/zulip.css         | 23 ++++++++++++-----------
 3 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/web/src/message_list_view.js b/web/src/message_list_view.js
index bd14a72aa2..13cd220f3c 100644
--- a/web/src/message_list_view.js
+++ b/web/src/message_list_view.js
@@ -1468,7 +1468,7 @@ export class MessageListView {
             // header has a box-shodow of `1px` at top but since it doesn't impact
             // `y` position of the header, we don't take it into account during calculations.
             const header_props = header.getBoundingClientRect();
-            // This value is dependent upon margin-bottom applied to recipient row.
+            // This value is dependent upon space between two `recipient_row` message groups.
             const margin_between_recipient_rows = 10;
             const sticky_or_about_to_be_sticky_header_position =
                 visible_top + header_props.height + margin_between_recipient_rows;
diff --git a/web/src/recent_topics_ui.js b/web/src/recent_topics_ui.js
index 2287d6784e..339abfb622 100644
--- a/web/src/recent_topics_ui.js
+++ b/web/src/recent_topics_ui.js
@@ -888,7 +888,6 @@ export function show() {
     $("#message_feed_container").hide();
     $("#recent_topics_view").show();
     set_visible(true);
-    $(".header").css("padding-bottom", "0px");
 
     unread_ui.hide_unread_banner();
 
@@ -925,8 +924,6 @@ export function hide() {
     $("#recent_topics_view").hide();
     set_visible(false);
 
-    $(".header").css("padding-bottom", "10px");
-
     // This solves a bug with message_view_header
     // being broken sometimes when we narrow
     // to a filter and back to recent topics
diff --git a/web/styles/zulip.css b/web/styles/zulip.css
index c94b806a32..e180dbaac8 100644
--- a/web/styles/zulip.css
+++ b/web/styles/zulip.css
@@ -195,12 +195,6 @@ p.n-margin {
     display: none;
 }
 
-.top-messages-logo {
-    /* Since padding under message header is not transparent
-       we need to position it below the padding. */
-    padding-top: var(--header-padding-bottom);
-}
-
 .scheduled-messages-loading-logo,
 .alert-zulip-logo,
 .top-messages-logo,
@@ -222,6 +216,13 @@ p.n-margin {
     }
 }
 
+.top-messages-logo {
+    /* Since padding under message header is not transparent
+       we need to position it below the padding. */
+    padding-top: var(--header-padding-bottom);
+    margin-bottom: 0;
+}
+
 #feedback_container {
     display: none;
     position: absolute;
@@ -294,7 +295,6 @@ p.n-margin {
     z-index: 102; /* Needs to be higher than .alert-bar-container */
     width: 100%;
     height: var(--header-height);
-    padding-bottom: var(--header-padding-bottom);
     /* Since the headers are sticky, we need non-transparent background. */
     background-color: hsl(0deg 0% 100%);
 }
@@ -1183,9 +1183,9 @@ td.pointer {
 
 .message_list {
     .recipient_row {
-        /* This value should be in sync with `margin_between_recipient_rows`
-        in `message_list_view`. */
-        margin-bottom: 10px;
+        /* Browser overlaps extra top padding of message header and
+           the bottom border message if this margin is not present. */
+        margin-bottom: 1px;
         border-radius: 5px;
 
         .message_row:last-of-type {
@@ -1212,7 +1212,8 @@ td.pointer {
 
     .message_header {
         position: sticky;
-        top: var(--sidebar-top);
+        padding-top: var(--header-padding-bottom);
+        top: var(--header-height);
         z-index: 3;
         box-shadow: 0 -1px 0 0 var(--color-background);