From 2ca4db5c3baca4a14a83a518cd9f194f4d590578 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 6 Dec 2022 15:45:33 -0600
Subject: [PATCH] Chats: fix display of media attachments, fix break-words

---
 app/soapbox/components/media-gallery.tsx      |  2 +-
 .../chats/components/chat-message-list.tsx    | 23 ++++++++-----------
 app/styles/chats.scss                         |  4 ----
 3 files changed, 11 insertions(+), 18 deletions(-)

diff --git a/app/soapbox/components/media-gallery.tsx b/app/soapbox/components/media-gallery.tsx
index 9244f05d5..3e7b32bbc 100644
--- a/app/soapbox/components/media-gallery.tsx
+++ b/app/soapbox/components/media-gallery.tsx
@@ -262,7 +262,7 @@ const Item: React.FC<IItem> = ({
 interface IMediaGallery {
   sensitive?: boolean,
   media: ImmutableList<Attachment>,
-  height: number,
+  height?: number,
   onOpenMedia: (media: ImmutableList<Attachment>, index: number) => void,
   defaultWidth?: number,
   cacheWidth?: (width: number) => void,
diff --git a/app/soapbox/features/chats/components/chat-message-list.tsx b/app/soapbox/features/chats/components/chat-message-list.tsx
index 049fbb322..9e023ed0b 100644
--- a/app/soapbox/features/chats/components/chat-message-list.tsx
+++ b/app/soapbox/features/chats/components/chat-message-list.tsx
@@ -183,18 +183,15 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chat }) => {
     const { attachment } = chatMessage;
     if (!attachment) return null;
     return (
-      <div className='chat-message__media'>
-        <Bundle fetchComponent={MediaGallery}>
-          {(Component: any) => (
-            <Component
-              media={ImmutableList([attachment])}
-              height={120}
-              onOpenMedia={onOpenMedia}
-              visible
-            />
-          )}
-        </Bundle>
-      </div>
+      <Bundle fetchComponent={MediaGallery}>
+        {(Component: any) => (
+          <Component
+            media={ImmutableList([attachment])}
+            onOpenMedia={onOpenMedia}
+            visible
+          />
+        )}
+      </Bundle>
     );
   };
 
@@ -310,7 +307,7 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chat }) => {
                 title={getFormattedTimestamp(chatMessage)}
                 className={
                   classNames({
-                    'text-ellipsis break-all relative rounded-md py-2 px-3 max-w-full': true,
+                    'text-ellipsis break-words relative rounded-md py-2 px-3 max-w-full space-y-2': true,
                     'bg-primary-500 text-white': isMyMessage,
                     'bg-gray-200 dark:bg-gray-800 text-gray-900 dark:text-gray-100': !isMyMessage,
                     '!bg-transparent !p-0 emoji-lg': isOnlyEmoji,
diff --git a/app/styles/chats.scss b/app/styles/chats.scss
index c5d5cb302..940568862 100644
--- a/app/styles/chats.scss
+++ b/app/styles/chats.scss
@@ -292,10 +292,6 @@
   }
 }
 
-.chat-message__media {
-  height: 120px;
-}
-
 .chat-message .media-gallery {
   height: 100% !important;
   margin: 4px 0 8px;