From 1061cb0ffb2a2122411f4b075848edd442356407 Mon Sep 17 00:00:00 2001
From: Germain Souquet <germain@souquet.com>
Date: Tue, 13 Jul 2021 10:15:12 +0200
Subject: [PATCH] Fix layout regressions in message bubbles

---
 res/css/views/rooms/_EventBubbleTile.scss     | 44 ++++++++++++++++---
 res/themes/dark/css/_dark.scss                |  1 +
 .../legacy-light/css/_legacy-light.scss       |  1 +
 res/themes/light/css/_light.scss              |  1 +
 4 files changed, 40 insertions(+), 7 deletions(-)

diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss
index 313027bde6..48011951cc 100644
--- a/res/css/views/rooms/_EventBubbleTile.scss
+++ b/res/css/views/rooms/_EventBubbleTile.scss
@@ -67,7 +67,7 @@ limitations under the License.
     .mx_SenderProfile {
         position: relative;
         top: -2px;
-        left: calc(-1 * var(--gutterSize));
+        left: 2px;
     }
 
     &[data-self=false] {
@@ -75,7 +75,7 @@ limitations under the License.
             border-bottom-right-radius: var(--cornerRadius);
         }
         .mx_EventTile_avatar {
-            left: -48px;
+            left: -34px;
         }
 
         .mx_MessageActionBar {
@@ -91,7 +91,7 @@ limitations under the License.
             float: right;
             > a {
                 left: auto;
-                right: -35px;
+                right: -48px;
             }
         }
         .mx_SenderProfile {
@@ -123,10 +123,10 @@ limitations under the License.
         background: var(--backgroundColor);
         display: flex;
         gap: 5px;
-        margin: 0 -12px 0 -22px;
+        margin: 0 -12px 0 -9px;
         > a {
             position: absolute;
-            left: -35px;
+            left: -48px;
         }
     }
 
@@ -167,6 +167,7 @@ limitations under the License.
             margin: 0 calc(-1 * var(--gutterSize));
 
             .mx_EventTile_reply {
+                max-width: 90%;
                 padding: 0;
                 > a {
                     display: none !important;
@@ -186,6 +187,23 @@ limitations under the License.
         }
     }
 
+    .mx_EditMessageComposer_buttons {
+        position: static;
+        padding: 0;
+        margin: 0;
+        background: transparent;
+    }
+
+    .mx_ReactionsRow {
+        margin-right: -18px;
+        margin-left: -9px;
+    }
+
+    .mx_ReplyThread {
+        border-left-width: 2px;
+        border-left-color: $eventbubble-reply-color;
+    }
+
     &.mx_EventTile_bubbleContainer,
     &.mx_EventTile_info,
     & ~ .mx_EventListSummary[data-expanded=false] {
@@ -225,6 +243,19 @@ limitations under the License.
         .mx_EventTile {
             margin: 0 58px;
         }
+
+        .mx_EventTile_line {
+            margin: 0 5px;
+            > a {
+                left: auto;
+                right: 0;
+                transform: translateX(calc(100% + 5px));
+            }
+        }
+
+        .mx_MessageActionBar {
+            transform: translate3d(50%, 0, 0);
+        }
     }
 
     /* events that do not require bubble layout */
@@ -283,7 +314,6 @@ limitations under the License.
     }
 
     .mx_MTextBody {
-        /* 30px equates to the width of the timestamp */
-        max-width: calc(100% - 35px - var(--gutterSize));
+        max-width: 100%;
     }
 }
diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss
index 0b3444c95b..a43936c46e 100644
--- a/res/themes/dark/css/_dark.scss
+++ b/res/themes/dark/css/_dark.scss
@@ -234,6 +234,7 @@ $eventbubble-self-bg: #143A34;
 $eventbubble-others-bg: #394049;
 $eventbubble-bg-hover: #433C23;
 $eventbubble-avatar-outline: $bg-color;
+$eventbubble-reply-color: #C1C6CD;
 
 // ***** Mixins! *****
 
diff --git a/res/themes/legacy-light/css/_legacy-light.scss b/res/themes/legacy-light/css/_legacy-light.scss
index e485028774..f349a804a8 100644
--- a/res/themes/legacy-light/css/_legacy-light.scss
+++ b/res/themes/legacy-light/css/_legacy-light.scss
@@ -352,6 +352,7 @@ $eventbubble-self-bg: #F8FDFC;
 $eventbubble-others-bg: #F7F8F9;
 $eventbubble-bg-hover: rgb(242, 242, 242);
 $eventbubble-avatar-outline: #fff;
+$eventbubble-reply-color: #C1C6CD;
 
 // ***** Mixins! *****
 
diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss
index 6f0bcadaf7..ef5f4d8c86 100644
--- a/res/themes/light/css/_light.scss
+++ b/res/themes/light/css/_light.scss
@@ -354,6 +354,7 @@ $eventbubble-self-bg: #F8FDFC;
 $eventbubble-others-bg: #F7F8F9;
 $eventbubble-bg-hover: #FEFCF5;
 $eventbubble-avatar-outline: $primary-bg-color;
+$eventbubble-reply-color: #C1C6CD;
 
 // ***** Mixins! *****