From f217c6fd61bd464eb200753a45860ab921693669 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Tue, 18 Jan 2022 10:37:44 +0000
Subject: [PATCH] Update bubble layout styling for stickers (#7560)

---
 res/css/views/rooms/_EventBubbleTile.scss | 22 +++++++++++++++++++++-
 src/components/views/rooms/EventTile.tsx  |  4 ++--
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss
index 7667b7e556..f4d0e39139 100644
--- a/res/css/views/rooms/_EventBubbleTile.scss
+++ b/res/css/views/rooms/_EventBubbleTile.scss
@@ -126,12 +126,14 @@ limitations under the License.
                 border-bottom-right-radius: var(--cornerRadius);
             }
         }
+
         .mx_EventTile_avatar {
             left: -34px;
         }
 
         --backgroundColor: $eventbubble-others-bg;
     }
+
     &[data-self=true] {
         .mx_EventTile_line {
             float: right;
@@ -144,6 +146,11 @@ limitations under the License.
             }
         }
 
+        .mx_EventTile_sticker {
+            // align timestamp with those inside bubbles
+            margin-right: 32px;
+        }
+
         .mx_ThreadInfo {
             float: right;
             margin-right: calc(-1 * var(--gutterSize));
@@ -195,7 +202,8 @@ limitations under the License.
             z-index: 3; // above media and location share maps
         }
 
-        &.mx_EventTile_mediaLine {
+        // we put the timestamps for media (other than stickers) atop the media along with a gradient to aid visibility
+        &.mx_EventTile_mediaLine:not(.mx_EventTile_sticker) {
             .mx_MessageTimestamp {
                 color: #ffffff; // regardless of theme, always visible on the below gradient
             }
@@ -214,6 +222,18 @@ limitations under the License.
             }
         }
 
+        &.mx_EventTile_sticker {
+            > a {
+                // position timestamps for stickers to the right of the un-bubbled sticker
+                right: unset;
+                left: 100%;
+            }
+
+            .mx_MStickerBody_wrapper {
+                padding: 0;
+            }
+        }
+
         //noinspection CssReplaceWithShorthandSafely
         .mx_MImageBody {
             width: 100%;
diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx
index 0118f58757..4ebe8f2300 100644
--- a/src/components/views/rooms/EventTile.tsx
+++ b/src/components/views/rooms/EventTile.tsx
@@ -1106,9 +1106,9 @@ export default class EventTile extends React.Component<IProps, IState> {
         const EventTileType = sdk.getComponent(tileHandler);
         const isProbablyMedia = MediaEventHelper.isEligible(this.props.mxEvent);
 
-        const lineClasses = classNames({
-            mx_EventTile_line: true,
+        const lineClasses = classNames("mx_EventTile_line", {
             mx_EventTile_mediaLine: isProbablyMedia,
+            mx_EventTile_sticker: this.props.mxEvent.getType() === EventType.Sticker,
         });
 
         const isSending = (['sending', 'queued', 'encrypting'].indexOf(this.props.eventSendStatus) !== -1);