Fix layout regressions in message bubbles

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: 100%;
-        max-width: calc(100% - 35px - var(--gutterSize));
     }
 }

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! *****
 

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! *****
 

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! *****