From 01714d9c83f087d83e6cfb3f21dac8ce931979b8 Mon Sep 17 00:00:00 2001
From: Manan Sadana <manancodes.dev@gmail.com>
Date: Wed, 18 Oct 2023 15:16:09 +0530
Subject: [PATCH] Fix: Bubble layout design is broken (#11763)

* Fixed the layout, added border to match design

* Border fixed for hover and highlighted messages

* moved some selectors up to avoid duplicate selectors
---
 res/css/views/rooms/_EventBubbleTile.pcss | 37 +++++++++++++++--------
 1 file changed, 24 insertions(+), 13 deletions(-)

diff --git a/res/css/views/rooms/_EventBubbleTile.pcss b/res/css/views/rooms/_EventBubbleTile.pcss
index 0b16d626c0..f9901788dd 100644
--- a/res/css/views/rooms/_EventBubbleTile.pcss
+++ b/res/css/views/rooms/_EventBubbleTile.pcss
@@ -58,12 +58,34 @@ limitations under the License.
         margin-right: 0;
     }
 
+    .mx_EventTile_avatar {
+        line-height: 0;
+        border: 4px solid $background;
+        border-radius: 50%;
+        position: absolute;
+        top: 6px;
+        z-index: 9;
+        img {
+            box-shadow: 0 0 0 3px $background;
+            border-radius: 50%;
+        }
+    }
+
     &.mx_EventTile_highlight {
+        .mx_EventTile_avatar {
+            border-color: $event-highlight-bg-color;
+        }
         &::before {
             background-color: $event-highlight-bg-color;
         }
     }
 
+    &:hover {
+        .mx_EventTile_avatar {
+            border-color: $eventbubble-bg-hover;
+        }
+    }
+
     /* For replies */
     .mx_EventTile {
         padding-top: 0;
@@ -177,7 +199,7 @@ limitations under the License.
         }
 
         .mx_EventTile_avatar {
-            left: -34px;
+            left: -36px;
         }
 
         .mx_MessageActionBar {
@@ -241,7 +263,7 @@ limitations under the License.
 
         .mx_EventTile_avatar {
             top: -19px; /* height of the sender block */
-            right: -35px;
+            right: -38px;
         }
 
         .mx_MediaBody {
@@ -401,17 +423,6 @@ limitations under the License.
         }
     }
 
-    .mx_EventTile_avatar {
-        position: absolute;
-        top: 0;
-        line-height: 1;
-        z-index: 9;
-        img {
-            box-shadow: 0 0 0 3px $background;
-            border-radius: 50%;
-        }
-    }
-
     &.mx_EventTile_noSender {
         .mx_EventTile_avatar {
             top: -19px;