Fix position of the message action bar on left side bubbles (#8398)

* Fix position of the message action bar on data-self=false bubble

- Fix position of the bar on GenericEventListSummary as well
- Override default value `right: 8px` of MessageActionBar

Signed-off-by: Suguru Hirahara <[email protected]>

* Use variables for MessageActionBar

Signed-off-by: Suguru Hirahara <[email protected]>

* Set the right property to [data-self=true]

Signed-off-by: Suguru Hirahara <[email protected]>

* Remove space for "React" and "Reply" buttons inside MessageActionBar on the left side bubble inside ThreadView

This commit removes space reserved for those buttons on deleted or "Unable to decrypt" message bubble inside ThreadView.

Signed-off-by: Suguru Hirahara <[email protected]>

Author: luixxiul

res/css/views/messages/_MessageActionBar.scss

@@ -16,11 +16,14 @@ limitations under the License.
 */
 
 .mx_MessageActionBar {
+    --MessageActionBar-size-button: 28px;
+    --MessageActionBar-size-box: 32px; // 28px + 2px (margin) * 2
+
     position: absolute;
     visibility: hidden;
     cursor: pointer;
     display: flex;
-    height: 32px;
+    height: var(--MessageActionBar-size-box);
     line-height: $font-24px;
     border-radius: 8px;
     background: $background;
@@ -64,8 +67,8 @@ limitations under the License.
 }
 
 .mx_MessageActionBar_maskButton {
-    width: 28px;
-    height: 28px;
+    width: var(--MessageActionBar-size-button);
+    height: var(--MessageActionBar-size-button);
 
     &:disabled,
     &[disabled] {

res/css/views/rooms/_EventBubbleTile.scss

@@ -130,7 +130,6 @@ limitations under the License.
 
     .mx_MessageActionBar {
         top: -28px;
-        right: 0;
         z-index: 9; // above the avatar
     }
 
@@ -171,7 +170,8 @@ limitations under the License.
         }
 
         .mx_MessageActionBar {
-            right: -100px; // to make sure it doesn't overflow to the left or cover sender profile
+            inset-inline-start: calc(100% - var(--MessageActionBar-size-box));
+            right: initial; // Reset the default value
         }
 
         .mx_ThreadSummary {
@@ -225,6 +225,7 @@ limitations under the License.
                 order: -1;
             }
         }
+
         .mx_EventTile_avatar {
             top: -19px; // height of the sender block
             right: -35px;
@@ -234,6 +235,10 @@ limitations under the License.
             background: $eventbubble-self-bg;
         }
 
+        .mx_MessageActionBar {
+            inset-inline-end: 0;
+        }
+
         --backgroundColor: $eventbubble-self-bg;
     }
 
@@ -620,6 +625,7 @@ limitations under the License.
         margin-right: 0;
 
         .mx_MessageActionBar {
+            inset-inline-start: initial; // Reset .mx_EventTile[data-layout="bubble"][data-self="false"] .mx_MessageActionBar
             right: 48px; // align with that of right-column bubbles
         }
 

res/css/views/rooms/_EventTile.scss

@@ -900,12 +900,6 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
                 margin: 0 -13px 0 0; // align with normal messages
             }
         }
-
-        &[data-self=false] {
-            .mx_MessageActionBar {
-                right: -60px; // smaller overlap, otherwise it'll overflow on the right
-            }
-        }
     }
 
     .mx_EventTile[data-layout=group] {