From db5f5846847ec6c74dfb669c621e80d6be08341d Mon Sep 17 00:00:00 2001
From: Karl Stolley <karl@zulip.com>
Date: Tue, 11 Jun 2024 11:05:07 -0500
Subject: [PATCH] info_density: Sanely restore Zulip-style oversize emoji.

---
 web/styles/app_variables.css     | 17 +++++++++++++++++
 web/styles/rendered_markdown.css | 28 ++++++++++++----------------
 2 files changed, 29 insertions(+), 16 deletions(-)

diff --git a/web/styles/app_variables.css b/web/styles/app_variables.css
index 9c58880f3c..c54b01bff9 100644
--- a/web/styles/app_variables.css
+++ b/web/styles/app_variables.css
@@ -85,6 +85,23 @@
        precise heights, and in the case of square elements,
        a matching precise width as well. */
     --length-line-fitted-block: calc(var(--base-line-height-unitless) * 1em);
+    /* Emoji elements are allowed to exceed the perfectly-fit
+       line-height. Classic Zulip emoji sizing is a 20px square
+       emoji at a 14px font-size, for 1.4286em at 14px/1em. */
+    --length-line-oversize-block: 1.4286em;
+    /* To avoid disturbing the flow of text around emoji or other
+       oversize inline blocks, we calculate a negative margin
+       adjustment for offsetting the emoji, top and bottom. */
+    --length-line-oversize-block-margin-adjust: calc(
+        (
+                (
+                        min(
+                            var(--base-maximum-block-height-em),
+                            var(--length-line-fitted-block)
+                        )
+                    ) - var(--length-line-oversize-block)
+            ) / 2
+    );
 
     /* Legacy values */
     --legacy-body-line-height-unitless: calc(20 / 14);
diff --git a/web/styles/rendered_markdown.css b/web/styles/rendered_markdown.css
index 66bd4bab25..9a4cfb75ca 100644
--- a/web/styles/rendered_markdown.css
+++ b/web/styles/rendered_markdown.css
@@ -138,22 +138,18 @@
 
     /* Emoji; sized to be easily understood while not overwhelming text. */
     .emoji {
-        /* The box for emoji is kept below a certain maximum, regardless
-           of more open line-heights. This prevents emoji from sizing
-           excessively larger than the surrounding text's content area. */
-        height: calc(
-            min(
-                var(--base-maximum-block-height-em),
-                var(--length-line-fitted-block)
-            )
-        );
-        width: calc(
-            min(
-                var(--base-maximum-block-height-em),
-                var(--length-line-fitted-block)
-            )
-        );
-        /* We set the alignment programmatically, as an em value. */
+        /* The box for emoji is allowed to be larger than the size of the
+           line-height. */
+        height: var(--length-line-oversize-block);
+        width: var(--length-line-oversize-block);
+        /* A negative top and bottom margin adjustment allows emoji
+           to size larger than the size of the line, without disturbing
+           the surrounding lines of text. */
+        margin: var(--length-line-oversize-block-margin-adjust) auto;
+        /* We set the alignment programmatically, as an em value.
+           Because the negative margins above are equal, top and bottom,
+           this vertical offset value works without adjustment for
+           oversize emoji blocks. */
         vertical-align: var(--line-fitted-vertical-align-offset-em);
     }