From 2a1a180ece3d0ce73fa7af4a7c720e6369141e3c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Thu, 11 Nov 2021 15:48:11 +0100
Subject: [PATCH] Fix hover tile border (#7117)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Revert "Update highlighted event line to prevent content jumping (#7090)"

This reverts commit 0f8272c6a1588d37571e45b8dcf7f12678a34f32.

* Fix message jumps

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 res/css/views/right_panel/_ThreadPanel.scss |  1 -
 res/css/views/rooms/_EventTile.scss         | 26 ++++++++++++---------
 2 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/res/css/views/right_panel/_ThreadPanel.scss b/res/css/views/right_panel/_ThreadPanel.scss
index a0ba5512c4..369c57cdd2 100644
--- a/res/css/views/right_panel/_ThreadPanel.scss
+++ b/res/css/views/right_panel/_ThreadPanel.scss
@@ -184,7 +184,6 @@ limitations under the License.
 
     .mx_EventTile, .mx_EventListSummary {
         // Account for scrollbar when hovering
-        margin: 0 2px;
         padding-top: 0;
 
         .mx_ThreadInfo {
diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
index a018ec3f74..f7b5570956 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@@ -221,25 +221,25 @@ $left-gutter: 64px;
     &:hover.mx_EventTile_verified .mx_EventTile_line,
     &:hover.mx_EventTile_unverified .mx_EventTile_line,
     &:hover.mx_EventTile_unknown .mx_EventTile_line {
-        padding-left: calc($left-gutter);
+        padding-left: calc($left-gutter - $selected-message-border-width);
     }
 
     &:hover.mx_EventTile_verified .mx_EventTile_line {
-        box-shadow: inset $selected-message-border-width 0 0 0 $e2e-verified-color;
+        border-left: $e2e-verified-color $selected-message-border-width solid;
     }
 
     &:hover.mx_EventTile_unverified .mx_EventTile_line {
-        box-shadow: inset $selected-message-border-width 0 0 0 $e2e-verified-color;
+        border-left: $e2e-unverified-color $selected-message-border-width solid;
     }
 
     &:hover.mx_EventTile_unknown .mx_EventTile_line {
-        box-shadow: inset $selected-message-border-width 0 0 0 $e2e-verified-color;
+        border-left: $e2e-unknown-color $selected-message-border-width solid;
     }
 
     &:hover.mx_EventTile_verified.mx_EventTile_info .mx_EventTile_line,
     &:hover.mx_EventTile_unverified.mx_EventTile_info .mx_EventTile_line,
     &:hover.mx_EventTile_unknown.mx_EventTile_info .mx_EventTile_line {
-        padding-left: calc($left-gutter + 18px);
+        padding-left: calc($left-gutter + 18px - $selected-message-border-width);
     }
 
     /* End to end encryption stuff */
@@ -822,7 +822,7 @@ $left-gutter: 64px;
     .mx_EventTile_senderDetails {
         display: flex;
         align-items: center;
-        gap: 6px;
+        gap: calc(6px + $selected-message-border-width);
 
         a {
             flex: 1;
@@ -846,17 +846,21 @@ $left-gutter: 64px;
         display: none;
     }
 
-    .mx_EventTile_line {
-        padding-left: 0 !important;
-        order: 10 !important;
-    }
-
     .mx_EventTile {
         width: 100%;
         display: flex;
         flex-direction: column;
         padding-top: 0;
 
+        .mx_EventTile_line {
+            padding-left: $selected-message-border-width !important;
+            order: 10 !important;
+        }
+
+        &:hover .mx_EventTile_line {
+            padding-left: 0 !important;
+        }
+
         .mx_MessageTimestamp {
             left: auto;
             right: 2px !important;