Fix status overflow column

app/soapbox/components/account.tsx

@@ -164,9 +164,9 @@ const Account = ({
   const LinkEl: any = withLinkToProfile ? Link : 'div';
 
   return (
-    <div data-testid='account' className='flex-shrink-0 group block w-full' ref={overflowRef}>
+    <div data-testid='account' className='shrink-0 group block w-full' ref={overflowRef}>
       <HStack alignItems={actionAlignment} justifyContent='between'>
-        <HStack alignItems={withAccountNote ? 'top' : 'center'} space={3}>
+        <HStack className='grow min-w-0' alignItems={withAccountNote ? 'top' : 'center'} space={3}>
           <ProfilePopper
             condition={showProfileHoverCard}
             wrapper={(children) => <HoverRefWrapper className='relative' accountId={account.id} inline>{children}</HoverRefWrapper>}
@@ -186,7 +186,7 @@ const Account = ({
             </LinkEl>
           </ProfilePopper>
 
-          <div className='flex-grow'>
+          <div className='grow min-w-0'>
             <ProfilePopper
               condition={showProfileHoverCard}
               wrapper={(children) => <HoverRefWrapper accountId={account.id} inline>{children}</HoverRefWrapper>}
@@ -210,7 +210,7 @@ const Account = ({
             </ProfilePopper>
 
             <Stack space={withAccountNote ? 1 : 0}>
-              <HStack alignItems='center' space={1} style={style}>
+              <HStack className='grow' alignItems='center' space={1} style={style}>
                 <Text theme='muted' size='sm' truncate>@{username}</Text>
 
                 {account.favicon && (

app/soapbox/components/status.tsx

@@ -287,14 +287,14 @@ const Status: React.FC<IStatus> = (props) => {
           data-id={status.id}
         >
 
-          <div className='flex mb-3'>
-            <div className='grow'>
+          <div className={classNames('flex items-center', { 'mb-3': status.reblog && typeof status.reblog === 'object' })}>
+            <div className='grow min-w-0'>
               {
                 status.reblog && typeof status.reblog === 'object' && (
                   <NavLink
                     to={`/@${status.getIn(['account', 'acct'])}`}
                     onClick={(event) => event.stopPropagation()}
-                    className='flex items-center mb-3 text-gray-700 dark:text-gray-600 text-xs font-medium space-x-1 hover:underline'
+                    className='flex items-center text-gray-700 dark:text-gray-600 text-xs font-medium space-x-1 hover:underline'
                   >
                     <Icon src={require('@tabler/icons/repeat.svg')} className='text-green-600' />
 
@@ -312,21 +312,21 @@ const Status: React.FC<IStatus> = (props) => {
                   </NavLink>
                 )
               }
-              <AccountContainer
-                key={String(actualStatus.getIn(['account', 'id']))}
-                id={String(actualStatus.getIn(['account', 'id']))}
-                timestamp={actualStatus.created_at}
-                timestampUrl={statusUrl}
-                hideActions
-                showEdit={!!actualStatus.edited_at}
-                showProfileHoverCard={hoverable}
-                withLinkToProfile={hoverable}
-              />
             </div>
-
             <Icon aria-hidden src={privacyIcon} className='h-5 w-5 shrink-0 text-gray-400 dark:text-gray-600' />
           </div>
-
+          <div className='mb-3'>
+            <AccountContainer
+              key={String(actualStatus.getIn(['account', 'id']))}
+              id={String(actualStatus.getIn(['account', 'id']))}
+              timestamp={actualStatus.created_at}
+              timestampUrl={statusUrl}
+              hideActions
+              showEdit={!!actualStatus.edited_at}
+              showProfileHoverCard={hoverable}
+              withLinkToProfile={hoverable}
+            />
+          </div>
 
           <div className='status__content-wrapper'>
             {!group && actualStatus.group && (