Restore action bar

res/css/views/rooms/_EventBubbleTile.scss

@@ -69,18 +69,32 @@ limitations under the License.
     }
 
     .mx_EventTile_line {
+        position: relative;
         padding: var(--gutterSize);
-        border-radius: var(--cornerRadius);
+        border-top-left-radius: var(--cornerRadius);
+        border-top-right-radius: var(--cornerRadius);
+        border-bottom-right-radius: var(--cornerRadius);
         background: var(--backgroundColor);
         display: flex;
         gap: var(--gutterSize);
         margin: 0 -12px 0 -22px;
         > a {
             position: absolute;
-            left: -57px;
+            left: -35px;
         }
     }
 
+    &.mx_EventTile_continuation .mx_EventTile_line {
+        border-top-left-radius: 0;
+    }
+
+    &.mx_EventTile_lastInSection .mx_EventTile_line {
+        border-bottom-left-radius: var(--cornerRadius);
+    }
+
+
+
+
     .mx_EventTile_avatar {
         position: absolute;
         top: 0;
@@ -94,6 +108,10 @@ limitations under the License.
     &[data-self=true] {
         .mx_EventTile_line {
             float: right;
+            > a {
+                left: auto;
+                right: -35px;
+            }
         }
         .mx_SenderProfile {
             display: none;
@@ -153,6 +171,11 @@ limitations under the License.
             left: calc(-1 * var(--avatarSize));
         }
 
+        .mx_MessageActionBar {
+            right: 0;
+            transform: translate3d(50%, 50%, 0);
+        }
+
         --backgroundColor: $eventbubble-others-bg;
     }
 

res/css/views/rooms/_EventTile.scss

@@ -123,13 +123,6 @@ $hover-select-border: 4px;
         left: calc(-$hover-select-border);
     }
 
-    .mx_EventTile:hover .mx_MessageActionBar,
-    .mx_EventTile.mx_EventTile_actionBarFocused .mx_MessageActionBar,
-    [data-whatinput='keyboard'] .mx_EventTile:focus-within .mx_MessageActionBar,
-    .mx_EventTile.focus-visible:focus-within .mx_MessageActionBar {
-        visibility: visible;
-    }
-
     /* this is used for the tile for the event which is selected via the URL.
      * TODO: ultimately we probably want some transition on here.
      */
@@ -626,6 +619,13 @@ $hover-select-border: 4px;
     }
 }
 
+.mx_EventTile:hover .mx_MessageActionBar,
+.mx_EventTile.mx_EventTile_actionBarFocused .mx_MessageActionBar,
+[data-whatinput='keyboard'] .mx_EventTile:focus-within .mx_MessageActionBar,
+.mx_EventTile.focus-visible:focus-within .mx_MessageActionBar {
+    visibility: visible;
+}
+
 @media only screen and (max-width: 480px) {
     .mx_EventTile_line, .mx_EventTile_reply {
         padding-left: 0;

src/components/structures/MessagePanel.tsx

@@ -644,8 +644,10 @@ export default class MessagePanel extends React.Component<IProps, IState> {
         }
 
         let willWantDateSeparator = false;
+        let lastInSection = true;
         if (nextEvent) {
             willWantDateSeparator = this.wantsDateSeparator(mxEv, nextEvent.getDate() || new Date());
+            lastInSection = willWantDateSeparator || mxEv.getSender() !== nextEvent.getSender();
         }
 
         // is this a continuation of the previous message?
@@ -702,7 +704,7 @@ export default class MessagePanel extends React.Component<IProps, IState> {
                     isTwelveHour={this.props.isTwelveHour}
                     permalinkCreator={this.props.permalinkCreator}
                     last={last}
-                    lastInSection={willWantDateSeparator}
+                    lastInSection={lastInSection}
                     lastSuccessful={isLastSuccessful}
                     isSelectedEvent={highlight}
                     getRelationsForEvent={this.props.getRelationsForEvent}