Merge branch 'fix-centering-of-compose-form' into 'develop'

Add spacing above textarea

See merge request soapbox-pub/soapbox!2000

app/soapbox/pages/home-page.tsx

@@ -16,11 +16,9 @@ import {
 } from 'soapbox/features/ui/util/async-components';
 import { useAppSelector, useOwnAccount, useFeatures, useSoapboxConfig } from 'soapbox/hooks';
 
-import Avatar from '../components/avatar';
-import { Card, CardBody, HStack, Layout } from '../components/ui';
+import { Avatar, Card, CardBody, HStack, Layout } from '../components/ui';
 import ComposeForm from '../features/compose/components/compose-form';
 import BundleContainer from '../features/ui/containers/bundle-container';
-// import GroupSidebarPanel from '../features/groups/sidebar_panel';
 
 const HomePage: React.FC = ({ children }) => {
   const me = useAppSelector(state => state.me);
@@ -35,6 +33,7 @@ const HomePage: React.FC = ({ children }) => {
   const cryptoLimit = soapboxConfig.cryptoDonatePanel.get('limit', 0);
 
   const acct = account ? account.acct : '';
+  const avatar = account ? account.avatar : '';
 
   return (
     <>
@@ -44,15 +43,17 @@ const HomePage: React.FC = ({ children }) => {
             <CardBody>
               <HStack alignItems='start' space={4}>
                 <Link to={`/@${acct}`}>
-                  <Avatar account={account} size={46} />
+                  <Avatar src={avatar} size={46} />
                 </Link>
 
-                <ComposeForm
-                  id='home'
-                  shouldCondense
-                  autoFocus={false}
-                  clickableAreaRef={composeBlock}
-                />
+                <div className='translate-y-0.5 w-full'>
+                  <ComposeForm
+                    id='home'
+                    shouldCondense
+                    autoFocus={false}
+                    clickableAreaRef={composeBlock}
+                  />
+                </div>
               </HStack>
             </CardBody>
           </Card>