Chats: improve attachments, make modal work

app/soapbox/features/chats/components/chat_message_list.js

@@ -8,6 +8,7 @@ import { Map as ImmutableMap, List as ImmutableList } from 'immutable';
 import { fetchChatMessages } from 'soapbox/actions/chats';
 import emojify from 'soapbox/features/emoji/emoji';
 import classNames from 'classnames';
+import { openModal } from 'soapbox/actions/modal';
 import { escape, throttle } from 'lodash';
 import { MediaGallery } from 'soapbox/features/ui/util/async-components';
 import Bundle from 'soapbox/features/ui/components/bundle';
@@ -117,6 +118,10 @@ class ChatMessageList extends ImmutablePureComponent {
     trailing: true,
   });
 
+  onOpenMedia = (media, index) => {
+    this.props.dispatch(openModal('MEDIA', { media, index }));
+  };
+
   maybeRenderMedia = chatMessage => {
     const attachment = chatMessage.get('attachment');
     if (!attachment) return null;
@@ -125,7 +130,8 @@ class ChatMessageList extends ImmutablePureComponent {
         {Component => (
           <Component
             media={ImmutableList([attachment])}
-            height={100}
+            height={120}
+            onOpenMedia={this.onOpenMedia}
           />
         )}
       </Bundle>

app/styles/chats.scss

@@ -291,7 +291,15 @@
   }
 }
 
-.chat-message .media-gallery__item-thumbnail img,
-.chat-message .media-gallery__item-thumbnail .still-image img {
-  object-fit: contain;
+.chat-message .media-gallery {
+  height: 120px !important;
+
+  .spoiler-button {
+    display: none;
+  }
+
+  &__item-thumbnail img,
+  &__item-thumbnail .still-image img {
+    object-fit: contain;
+  }
 }