From 9f0b7db8d8ac76329be03394461376b6b90287c6 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sat, 18 Jun 2022 15:50:46 -0500
Subject: [PATCH 1/2] ChatWindow: fix spacing between elements

---
 app/soapbox/features/chats/components/chat-window.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/soapbox/features/chats/components/chat-window.tsx b/app/soapbox/features/chats/components/chat-window.tsx
index 7dfc0e509..356669917 100644
--- a/app/soapbox/features/chats/components/chat-window.tsx
+++ b/app/soapbox/features/chats/components/chat-window.tsx
@@ -8,7 +8,7 @@ import {
 import Avatar from 'soapbox/components/avatar';
 import HoverRefWrapper from 'soapbox/components/hover_ref_wrapper';
 import IconButton from 'soapbox/components/icon_button';
-import { Counter } from 'soapbox/components/ui';
+import { HStack, Counter } from 'soapbox/components/ui';
 import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
 import { makeGetChat } from 'soapbox/selectors';
 import { getAcct } from 'soapbox/utils/accounts';
@@ -91,7 +91,7 @@ const ChatWindow: React.FC<IChatWindow> = ({ idx, chatId, windowState }) => {
 
   return (
     <div className={`pane pane--${windowState}`} style={{ right: `${right}px` }}>
-      <div className='pane__header'>
+      <HStack space={2} className='pane__header'>
         {unreadCount > 0 ? unreadIcon : avatar }
         <button className='pane__title' onClick={handleChatToggle(chat.id)}>
           @{getAcct(account, displayFqn)}
@@ -99,7 +99,7 @@ const ChatWindow: React.FC<IChatWindow> = ({ idx, chatId, windowState }) => {
         <div className='pane__close'>
           <IconButton src={require('@tabler/icons/icons/x.svg')} title='Close chat' onClick={handleChatClose(chat.id)} />
         </div>
-      </div>
+      </HStack>
       <div className='pane__content'>
         <ChatBox
           chatId={chat.id}

From 9365aa2ceeb64fc798066804d7bcacb5f4294322 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sat, 18 Jun 2022 16:19:22 -0500
Subject: [PATCH 2/2] ChatWindow: don't focus on setting ref

---
 app/soapbox/features/chats/components/chat-window.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/app/soapbox/features/chats/components/chat-window.tsx b/app/soapbox/features/chats/components/chat-window.tsx
index 356669917..5a71f6598 100644
--- a/app/soapbox/features/chats/components/chat-window.tsx
+++ b/app/soapbox/features/chats/components/chat-window.tsx
@@ -58,7 +58,6 @@ const ChatWindow: React.FC<IChatWindow> = ({ idx, chatId, windowState }) => {
 
   const handleInputRef = (el: HTMLTextAreaElement) => {
     inputElem.current = el;
-    focusInput();
   };
 
   const focusInput = () => {
@@ -66,8 +65,10 @@ const ChatWindow: React.FC<IChatWindow> = ({ idx, chatId, windowState }) => {
   };
 
   useEffect(() => {
-    focusInput();
-  }, [windowState === 'open']);
+    if (windowState === 'open') {
+      focusInput();
+    }
+  }, [windowState]);
 
   if (!chat) return null;
   const account = chat.account as unknown as AccountEntity;