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);