Update bubble layout styling for stickers (#7560)

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%;

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);