From 10f0d5dce3e3b8743d59c034dcfc22f6c5736bc3 Mon Sep 17 00:00:00 2001
From: Karl Stolley <karl@zulip.com>
Date: Fri, 26 Apr 2024 14:06:04 -0500
Subject: [PATCH] info_density: Extend Markdown-aligned space to message
 content area.

---
 web/styles/app_variables.css |  4 ++++
 web/styles/message_row.css   | 13 +++++++------
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/web/styles/app_variables.css b/web/styles/app_variables.css
index f0371f1e10..248ecb8973 100644
--- a/web/styles/app_variables.css
+++ b/web/styles/app_variables.css
@@ -76,6 +76,7 @@
         --base-line-height-unitless: 1.214;
         --markdown-interelement-space-px: 5px;
         --markdown-interelement-doubled-space-px: 10px;
+        --message-box-markdown-aligned-vertical-space: 5px;
     }
 
     /*
@@ -87,6 +88,9 @@
     /* 6px appears to provide 5px of space between the avatar
        and the selected-message outline, which is offset by -1px. */
     --message-box-vertical-margin: 6px;
+    --message-box-markdown-aligned-vertical-space: var(
+        --markdown-interelement-space-px
+    );
     --message-box-icon-width: 26px;
     --message-box-icon-height: 25px;
     /* The line-height on the sender line should coordinate with the
diff --git a/web/styles/message_row.css b/web/styles/message_row.css
index 8f9cffe853..d2b462a393 100644
--- a/web/styles/message_row.css
+++ b/web/styles/message_row.css
@@ -198,10 +198,10 @@
         .message_content {
             grid-area: message;
             /*
-            Space between two single line messages is 10px, which is maintained
-            by setting 5px of padding above messages without a sender.
+            Space between two single line messages is kept in
+            lockstep with adjacent Markdown elements.
             */
-            padding: 5px 0 0;
+            padding: var(--message-box-markdown-aligned-vertical-space) 0 0;
             color: var(--color-text-message-default);
             font-size: var(--base-font-size-px);
             line-height: var(--base-line-height-unitless);
@@ -321,9 +321,10 @@
                        me-messages. */
                     line-height: var(--base-line-height-unitless);
                     /* Ensure the same spacing below messages as for any other
-                       paragraph.
-                       TODO: Coordinate this with other info-density variables. */
-                    padding-bottom: 5px;
+                       paragraph. */
+                    padding-bottom: var(
+                        --message-box-markdown-aligned-vertical-space
+                    );
 
                     /* Display message components inline, with wrapping white-space,
                        so the sender name and message display as a continuous line