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]>
matrix-org · May 16, 2022 · 6f85110 · 6f85110
1 parent fcc4d62
commit 6f85110
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 11 deletions.
diff --git a/res/css/views/messages/_MessageActionBar.scss b/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] {

diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/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
         }
 

diff --git a/res/css/views/rooms/_EventTile.scss b/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] {