From 8df7d9c9ef073e046be4357166dd95aa052ff124 Mon Sep 17 00:00:00 2001
From: Chewbacca <dice.warrant-02@icloud.com>
Date: Fri, 2 Dec 2022 08:28:51 -0500
Subject: [PATCH] UX improvements to message bubble

---
 app/soapbox/features/chats/components/chat-composer.tsx     | 2 +-
 app/soapbox/features/chats/components/chat-message-list.tsx | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/soapbox/features/chats/components/chat-composer.tsx b/app/soapbox/features/chats/components/chat-composer.tsx
index 369d2b7e8..2368670be 100644
--- a/app/soapbox/features/chats/components/chat-composer.tsx
+++ b/app/soapbox/features/chats/components/chat-composer.tsx
@@ -141,7 +141,7 @@ const ChatComposer = React.forwardRef<HTMLTextAreaElement | null, IChatComposer>
   }
 
   return (
-    <div className='mt-auto pt-4 px-4 shadow-3xl'>
+    <div className='mt-auto px-4 shadow-3xl'>
       <HStack alignItems='stretch' justifyContent='between' space={4}>
         <Stack grow>
           <Combobox
diff --git a/app/soapbox/features/chats/components/chat-message-list.tsx b/app/soapbox/features/chats/components/chat-message-list.tsx
index 164a4240e..57ef60b6b 100644
--- a/app/soapbox/features/chats/components/chat-message-list.tsx
+++ b/app/soapbox/features/chats/components/chat-message-list.tsx
@@ -310,7 +310,7 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chat }) => {
                 title={getFormattedTimestamp(chatMessage)}
                 className={
                   classNames({
-                    'text-ellipsis break-all relative rounded-md p-2 max-w-full': true,
+                    'text-ellipsis break-all relative rounded-md py-2 px-3 max-w-full': 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,
@@ -448,7 +448,7 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chat }) => {
 
   return (
     <div className='h-full flex flex-col flex-grow space-y-6'>
-      <div className='flex-grow flex flex-col justify-end'>
+      <div className='flex-grow flex flex-col justify-end pb-2'>
         <Virtuoso
           ref={node}
           alignToBottom