A few CSS fixes for message bubbles

stylesheets/_modules.scss

@@ -609,14 +609,17 @@
   text-align: center;
   position: relative;
 
+  // These should match the paddings from .module-message__container,
+  // effectively "undoing" that padding.
   margin: {
     left: -12px;
     right: -12px;
     top: -10px;
-    bottom: -15px;
+    bottom: -10px;
   }
 
   border-radius: 16px;
+  line-height: 0;
   overflow: hidden;
 
   @include light-theme {
@@ -637,10 +640,6 @@
     border-top-left-radius: 0px;
     border-top-right-radius: 0px;
   }
-
-  &--with-collapsed-metadata {
-    margin-bottom: -10px;
-  }
 }
 
 .module-message__sticker-container {
@@ -4319,7 +4318,6 @@ $timer-icons: '55', '50', '45', '40', '35', '30', '25', '20', '15', '10', '05',
   display: inline-block;
   margin: 1px;
   vertical-align: middle;
-  overflow: hidden;
 }
 
 .module-image--with-background {

ts/components/conversation/Message.stories.tsx

@@ -1295,6 +1295,48 @@ const stories: Array<MessageStory> = [
       },
     ],
   ],
+  [
+    'Sticker',
+    [
+      {
+        title: 'Outgoing Sticker',
+        makeDataProps: () => ({
+          ...baseDataProps,
+          direction: 'outgoing',
+          status: 'sent',
+          authorColor: 'green',
+          isSticker: true,
+          attachments: [
+            {
+              url: '/fixtures/512x515-thumbs-up-lincoln.webp',
+              fileName: '512x515-thumbs-up-lincoln.webp',
+              contentType: 'image/webp' as MIMEType,
+              width: 128,
+              height: 128,
+            },
+          ],
+        }),
+      },
+      {
+        title: 'Incoming Sticker',
+        makeDataProps: () => ({
+          ...baseDataProps,
+          direction: 'incoming',
+          authorColor: 'green',
+          isSticker: true,
+          attachments: [
+            {
+              url: '/fixtures/512x515-thumbs-up-lincoln.webp',
+              fileName: '512x515-thumbs-up-lincoln.webp',
+              contentType: 'image/webp' as MIMEType,
+              width: 128,
+              height: 128,
+            },
+          ],
+        }),
+      },
+    ],
+  ],
 ];
 
 const renderEmojiPicker: AllProps['renderEmojiPicker'] = ({

ts/components/conversation/Message.tsx

@@ -619,9 +619,6 @@ export class Message extends React.PureComponent<Props, State> {
             withContentBelow
               ? 'module-message__attachment-container--with-content-below'
               : null,
-            collapseMetadata
-              ? 'module-message__attachment-container--with-collapsed-metadata'
-              : null,
             isSticker && !collapseMetadata
               ? 'module-message__sticker-container--with-content-below'
               : null