StatusActionBar: fix styles in Thread

app/soapbox/components/status-action-bar.tsx

@@ -1,3 +1,4 @@
+import classNames from 'classnames';
 import { List as ImmutableList } from 'immutable';
 import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
@@ -82,7 +83,8 @@ interface IStatusActionBar {
   status: Status,
   withDismiss?: boolean,
   withLabels?: boolean,
-  expandable?: boolean
+  expandable?: boolean,
+  space?: 'expand' | 'compact',
 }
 
 const StatusActionBar: React.FC<IStatusActionBar> = ({
@@ -90,6 +92,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
   withDismiss = false,
   withLabels = false,
   expandable = true,
+  space = 'compact',
 }) => {
   const intl = useIntl();
   const history = useHistory();
@@ -584,7 +587,12 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
   const canShare = ('share' in navigator) && status.visibility === 'public';
 
   return (
-    <div className='pt-4 flex flex-row space-x-2'>
+    <div
+      className={classNames('flex flex-row', {
+        'justify-between': space === 'expand',
+        'space-x-2': space === 'compact',
+      })}
+    >
       <StatusActionButton
         title={replyTitle}
         icon={require('@tabler/icons/message-circle-2.svg')}

app/soapbox/components/status-action-button.tsx

@@ -79,7 +79,7 @@ const StatusActionButton = React.forwardRef<HTMLButtonElement, IStatusActionButt
       ref={ref}
       type='button'
       className={classNames(
-        'flex items-center p-1 space-x-0.5 rounded-full',
+        'flex items-center p-1 rounded-full',
         'text-gray-600 hover:text-gray-600 dark:hover:text-white',
         'bg-white dark:bg-transparent',
         'focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 dark:ring-offset-0',
@@ -87,6 +87,8 @@ const StatusActionButton = React.forwardRef<HTMLButtonElement, IStatusActionButt
           'text-black dark:text-white': active && emoji,
           'text-accent-300 hover:text-accent-300 dark:hover:text-accent-300': active && !emoji && color === COLORS.accent,
           'text-success-600 hover:text-success-600 dark:hover:text-success-600': active && !emoji && color === COLORS.success,
+          'space-x-0.5': !text,
+          'space-x-2': text,
         },
         className,
       )}

app/soapbox/components/status.tsx

@@ -373,7 +373,9 @@ const Status: React.FC<IStatus> = (props) => {
             {quote}
 
             {!hideActionBar && (
+              <div className='pt-4'>
                 <StatusActionBar status={actualStatus} />
+              </div>
             )}
           </div>
         </div>

app/soapbox/features/status/index.tsx

@@ -484,7 +484,12 @@ const Thread: React.FC<IThread> = (props) => {
 
           <hr className='mb-2 border-t-2 dark:border-primary-800' />
 
-          <StatusActionBar status={status} withLabels expandable={false} />
+          <StatusActionBar
+            status={status}
+            expandable={false}
+            space='expand'
+            withLabels
+          />
         </div>
       </HotKeys>