Message bubble: Larger stickers; handle non-square aspect ratios

* Sticker picker: Handle non-square stickers
* Message bubble: Larger stickers; handle non-square aspect ratios

stylesheets/_modules.scss

@@ -5213,7 +5213,7 @@ button.module-image__border-overlay:focus {
     &__image,
     &__placeholder {
       width: 100%;
-      height: 100%;
+      height: auto;
     }
 
     &__placeholder {

ts/components/conversation/ImageGrid.tsx

@@ -60,10 +60,10 @@ export class ImageGrid extends React.Component<Props> {
     }
 
     if (attachments.length === 1 || !areAllAttachmentsVisual(attachments)) {
-      const { height, width } = getImageDimensions(attachments[0]);
-
-      const finalHeight = isSticker ? stickerSize : height;
-      const finalWidth = isSticker ? stickerSize : width;
+      const { height, width } = getImageDimensions(
+        attachments[0],
+        isSticker ? stickerSize : undefined
+      );
 
       return (
         <div
@@ -85,8 +85,8 @@ export class ImageGrid extends React.Component<Props> {
             curveBottomRight={curveBottomRight}
             attachment={attachments[0]}
             playIconOverlay={isVideoAttachment(attachments[0])}
-            height={finalHeight}
-            width={finalWidth}
+            height={height}
+            width={width}
             url={getUrl(attachments[0])}
             tabIndex={tabIndex}
             onClick={onClick}

ts/components/conversation/Message.md

@@ -997,6 +997,92 @@ First set is in a 1:1 conversation, second set is in a group.
 </util.ConversationContext>
 ```
 
+#### Sticker with non-square aspect ratio
+
+First set is in a 1:1 conversation, second set is in a group.
+
+```jsx
+<util.ConversationContext theme={util.theme} ios={util.ios} mode={util.mode}>
+  <div className="module-message-container">
+    <Message
+      authorColor="green"
+      direction="incoming"
+      isSticker={true}
+      timestamp={Date.now()}
+      i18n={util.i18n}
+      attachments={[
+        {
+          url: util.landscapePurpleObjectUrl,
+          contentType: 'image/png',
+          width: 200,
+          height: 50,
+        },
+      ]}
+      showVisualAttachment={() => console.log('showVisualAttachment')}
+    />
+  </div>
+  <div className="module-message-container">
+    <Message
+      authorColor="green"
+      direction="outgoing"
+      isSticker={true}
+      status="sent"
+      timestamp={Date.now()}
+      i18n={util.i18n}
+      attachments={[
+        {
+          url: util.landscapePurpleObjectUrl,
+          contentType: 'image/png',
+          width: 200,
+          height: 50,
+        },
+      ]}
+      showVisualAttachment={() => console.log('showVisualAttachment')}
+    />
+  </div>
+  <div className="module-message-container">
+    <Message
+      authorColor="green"
+      direction="incoming"
+      isSticker={true}
+      authorName="Mr. Sticker"
+      conversationType="group"
+      timestamp={Date.now()}
+      i18n={util.i18n}
+      attachments={[
+        {
+          url: util.landscapePurpleObjectUrl,
+          contentType: 'image/png',
+          width: 200,
+          height: 50,
+        },
+      ]}
+      showVisualAttachment={() => console.log('showVisualAttachment')}
+    />
+  </div>
+  <div className="module-message-container">
+    <Message
+      authorColor="green"
+      direction="outgoing"
+      isSticker={true}
+      conversationType="group"
+      status="sent"
+      timestamp={Date.now()}
+      i18n={util.i18n}
+      attachments={[
+        {
+          url: util.landscapePurpleObjectUrl,
+          contentType: 'image/png',
+          width: 200,
+          height: 50,
+        },
+      ]}
+      showVisualAttachment={() => console.log('showVisualAttachment')}
+    />
+  </div>
+</util.ConversationContext>
+```
+
 #### Sticker with pending image
 
 A sticker with no attachments (what our selectors produce for a pending sticker) is not displayed at all.

ts/components/conversation/Message.tsx

@@ -39,7 +39,7 @@ interface Trigger {
 
 // Same as MIN_WIDTH in ImageGrid.tsx
 const MINIMUM_LINK_PREVIEW_IMAGE_WIDTH = 200;
-const STICKER_SIZE = 128;
+const STICKER_SIZE = 200;
 const SELECTED_TIMEOUT = 1000;
 
 interface LinkPreviewType {

ts/types/Attachment.ts

@@ -166,7 +166,10 @@ type DimensionsType = {
   width: number;
 };
 
-export function getImageDimensions(attachment: AttachmentType): DimensionsType {
+export function getImageDimensions(
+  attachment: AttachmentType,
+  forcedWidth?: number
+): DimensionsType {
   const { height, width } = attachment;
   if (!height || !width) {
     return {
@@ -176,7 +179,8 @@ export function getImageDimensions(attachment: AttachmentType): DimensionsType {
   }
 
   const aspectRatio = height / width;
-  const targetWidth = Math.max(Math.min(MAX_WIDTH, width), MIN_WIDTH);
+  const targetWidth =
+    forcedWidth || Math.max(Math.min(MAX_WIDTH, width), MIN_WIDTH);
   const candidateHeight = Math.round(targetWidth * aspectRatio);
 
   return {