From 64f17ef013f867d567e4c862e2c7e596fc20f4eb Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 8 Feb 2023 12:50:35 -0600
Subject: [PATCH] ChatTextarea: add gaps between uploads, put pending upload at
 end of list

---
 .../chats/components/chat-textarea.tsx        | 28 +++++++++++--------
 1 file changed, 16 insertions(+), 12 deletions(-)

diff --git a/app/soapbox/features/chats/components/chat-textarea.tsx b/app/soapbox/features/chats/components/chat-textarea.tsx
index 22b0877e9..7a15a036a 100644
--- a/app/soapbox/features/chats/components/chat-textarea.tsx
+++ b/app/soapbox/features/chats/components/chat-textarea.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Textarea } from 'soapbox/components/ui';
+import { HStack, Textarea } from 'soapbox/components/ui';
 import { Attachment } from 'soapbox/types/entities';
 
 import ChatPendingUpload from './chat-pending-upload';
@@ -35,19 +35,23 @@ const ChatTextarea: React.FC<IChatTextarea> = ({
     `}
     >
       {(!!attachments?.length || isUploading) && (
-        <div className='flex p-3 pb-0'>
-          {isUploading && (
-            <ChatPendingUpload progress={uploadProgress} />
-          )}
-
+        <HStack className='-ml-2 -mt-2 p-3 pb-0' wrap>
           {attachments?.map(attachment => (
-            <ChatUpload
-              key={attachment.id}
-              attachment={attachment}
-              onDelete={onDeleteAttachment}
-            />
+            <div className='ml-2 mt-2 flex'>
+              <ChatUpload
+                key={attachment.id}
+                attachment={attachment}
+                onDelete={onDeleteAttachment}
+              />
+            </div>
           ))}
-        </div>
+
+          {isUploading && (
+            <div className='ml-2 mt-2 flex'>
+              <ChatPendingUpload progress={uploadProgress} />
+            </div>
+          )}
+        </HStack>
       )}
 
       <Textarea theme='transparent' {...rest} />