Chats: improve design of attachments, fix sizing bug

app/soapbox/features/chats/components/chat-message-list.tsx

@@ -312,15 +312,20 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chat }) => {
               </div>
             )}
 
-            <HStack
-              alignItems='bottom'
+            <Stack
+              space={0.5}
               className={classNames({
                 'max-w-[85%]': true,
+                'flex-1': chatMessage.attachment,
                 'order-2': isMyMessage,
                 'order-1': !isMyMessage,
               })}
-              justifyContent={isMyMessage ? 'end' : 'start'}
+              alignItems={isMyMessage ? 'end' : 'start'}
             >
+              {maybeRenderMedia(chatMessage)}
+
+              {content && (
+                <HStack alignItems='bottom'>
                   <div
                     title={getFormattedTimestamp(chatMessage)}
                     className={
@@ -336,7 +341,6 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chat }) => {
                     ref={setBubbleRef}
                     tabIndex={0}
                   >
-                {maybeRenderMedia(chatMessage)}
                     <Text
                       size='sm'
                       theme='inherit'
@@ -345,6 +349,8 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chat }) => {
                     />
                   </div>
                 </HStack>
+              )}
+            </Stack>
           </HStack>
 
           <HStack