From 2e825f637d576e2cb5eadfa0de7be832dcffd304 Mon Sep 17 00:00:00 2001
From: Josh Klar <josh@zulip.com>
Date: Wed, 14 Dec 2022 13:42:27 -0800
Subject: [PATCH] css: Apply negative spread radius to message box-shadows.

This fixes a visual regression in newer Electron builds (without
regressing Firefox) for which I still don't entirely know the root
cause, where extra "borders" were being applied to messages in both
streams and PMs. Applying a negative "spread radius" to the box-shadow
properties of these elements, and moving that pixel to the "horizontal
shadow" aspect of the property (which is used to create the left-side
"ruler" effect), restores the expected look and feel.

Tested in qutebrowser (Chromium 87-based), Electron v18+v19, and Firefox
107.

Refs (and should unblock) zulip/zulip-desktop#1251
---
 static/styles/zulip.css             | 16 +++++++++++++++-
 static/templates/single_message.hbs |  4 ++--
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/static/styles/zulip.css b/static/styles/zulip.css
index fc737976f7..3f6c251228 100644
--- a/static/styles/zulip.css
+++ b/static/styles/zulip.css
@@ -1386,7 +1386,21 @@ td.pointer {
     .messagebox,
     .date_row {
         background-color: hsla(192, 19%, 75%, 0.2);
-        box-shadow: inset 2px 0 0 0 hsl(0, 0%, 27%), -1px 0 0 0 hsl(0, 0%, 27%);
+        /* The 5th parameter here is a spread-radius, which, when negative,
+         * causes the shadow to shrink (be smaller than the target
+         * element), resulting in a visual width of 3px-1px=2px. This
+         * is a workaround for a regression found in Electron
+         * v18.3.15+ where the box-shadow with spread-radius >= 0
+         * would cause horizontal separator lines to appear between
+         * messages in the color of the left ruler. The root cause of
+         * that regression is yet unknown.
+         *
+         * Similar CSS for stream messages is present directly in the
+         * Handlebars templates, since the color used there is the
+         * stream's configured color.
+         */
+        box-shadow: inset 3px 0 0 -1px hsl(0, 0%, 27%),
+            -1px 0 0 0 hsl(0, 0%, 27%);
     }
 }
 
diff --git a/static/templates/single_message.hbs b/static/templates/single_message.hbs
index 01e16ce099..2b75f85021 100644
--- a/static/templates/single_message.hbs
+++ b/static/templates/single_message.hbs
@@ -3,10 +3,10 @@
   role="listitem">
     <div class="unread_marker"><div class="unread-marker-fill"></div></div>
     {{#if want_date_divider}}
-    <div class="date_row no-select" {{#if msg/is_stream}}style="box-shadow: inset 2px 0px 0px 0px {{background_color}}, -1px 0px 0px 0px {{background_color}};"{{/if}}>{{{date_divider_html}}}</div>
+    <div class="date_row no-select" {{#if msg/is_stream}}style="box-shadow: inset 3px 0px 0px -1px {{background_color}}, -1px 0px 0px 0px {{background_color}};"{{/if}}>{{{date_divider_html}}}</div>
     {{/if}}
     <div class="messagebox {{#if next_is_same_sender}}next_is_same_sender{{/if}}"
-      {{#if msg/is_stream}}style="box-shadow: inset 2px 0px 0px 0px {{background_color}}, -1px 0px 0px 0px {{background_color}};"{{/if}}>
+      {{#if msg/is_stream}}style="box-shadow: inset 3px 0px 0px -1px {{background_color}}, -1px 0px 0px 0px {{background_color}};"{{/if}}>
         <div class="messagebox-content">
             {{> message_body}}
         </div>