Fix status style regressions

app/soapbox/components/status.tsx

@@ -237,7 +237,7 @@ const Status: React.FC<IStatus> = (props) => {
     );
 
     reblogElementMobile = (
-      <div className='sm:hidden truncate'>
+      <div className='pb-5 -mt-2 sm:hidden truncate'>
         <NavLink
           to={`/@${status.getIn(['account', 'acct'])}`}
           onClick={(event) => event.stopPropagation()}
@@ -325,6 +325,7 @@ const Status: React.FC<IStatus> = (props) => {
         <Card
           variant={variant}
           className={classNames('status__wrapper', `status-${actualStatus.visibility}`, {
+            'py-6 sm:p-5': variant === 'rounded',
             'status-reply': !!status.in_reply_to_id,
             muted,
             read: unread === false,

app/soapbox/components/ui/card/card.tsx

@@ -33,7 +33,6 @@ const Card = React.forwardRef<HTMLDivElement, ICard>(({ children, variant = 'def
     ref={ref}
     {...filteredProps}
     className={classNames({
-      'space-y-4': true,
       'bg-white dark:bg-primary-900 text-gray-900 dark:text-gray-100 shadow-lg dark:shadow-none overflow-hidden': variant === 'rounded',
       [sizes[size]]: variant === 'rounded',
     }, className)}

app/soapbox/features/ads/components/ad.tsx

@@ -53,7 +53,7 @@ const Ad: React.FC<IAd> = ({ card, impression }) => {
 
   return (
     <div className='relative'>
-      <Card className='p-5' variant='rounded'>
+      <Card className='py-6 sm:p-5' variant='rounded'>
         <Stack space={4}>
           <HStack alignItems='center' space={3}>
             <Avatar src={instance.thumbnail} size={42} />

app/soapbox/features/settings/index.tsx

@@ -60,7 +60,7 @@ const Settings = () => {
 
   return (
     <Column label={intl.formatMessage(messages.settings)} transparent withHeader={false}>
-      <Card variant='rounded'>
+      <Card className='space-y-4' variant='rounded'>
         <CardHeader>
           <CardTitle title={intl.formatMessage(messages.profile)} />
         </CardHeader>

app/soapbox/features/status/index.tsx

@@ -380,9 +380,9 @@ const Thread: React.FC<IThread> = (props) => {
 
     return (
       <PendingStatus
-        className='thread__status'
         key={id}
         idempotencyKey={idempotencyKey}
+        thread
       />
     );
   };

app/soapbox/features/ui/components/pending_status.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 
 import StatusReplyMentions from 'soapbox/components/status-reply-mentions';
 import StatusContent from 'soapbox/components/status_content';
-import { HStack } from 'soapbox/components/ui';
+import { Card, HStack } from 'soapbox/components/ui';
 import AccountContainer from 'soapbox/containers/account_container';
 import PlaceholderCard from 'soapbox/features/placeholder/components/placeholder_card';
 import PlaceholderMediaGallery from 'soapbox/features/placeholder/components/placeholder_media_gallery';
@@ -24,6 +24,7 @@ interface IPendingStatus {
   className?: string,
   idempotencyKey: string,
   muted?: boolean,
+  thread?: boolean,
 }
 
 interface IPendingStatusMedia {
@@ -44,7 +45,7 @@ const PendingStatusMedia: React.FC<IPendingStatusMedia> = ({ status }) => {
   }
 };
 
-const PendingStatus: React.FC<IPendingStatus> = ({ idempotencyKey, className, muted }) => {
+const PendingStatus: React.FC<IPendingStatus> = ({ idempotencyKey, className, muted, thread = false }) => {
   const status = useAppSelector((state) => {
     const pendingStatus = state.pending_statuses.get(idempotencyKey);
     return pendingStatus ? buildStatus(state, pendingStatus, idempotencyKey) : null;
@@ -58,7 +59,10 @@ const PendingStatus: React.FC<IPendingStatus> = ({ idempotencyKey, className, mu
   return (
     <div className={classNames('opacity-50', className)}>
       <div className={classNames('status', { 'status-reply': !!status.in_reply_to_id, muted })} data-id={status.id}>
-        <div className={classNames('status__wrapper', `status-${status.visibility}`, { 'status-reply': !!status.in_reply_to_id })} tabIndex={muted ? undefined : 0}>
+        <Card
+          className={classNames('py-6 sm:p-5', `status-${status.visibility}`, { 'status-reply': !!status.in_reply_to_id })}
+          variant={thread ? 'default' : 'rounded'}
+        >
           <div className='mb-4'>
             <HStack justifyContent='between' alignItems='start'>
               <AccountContainer
@@ -88,7 +92,7 @@ const PendingStatus: React.FC<IPendingStatus> = ({ idempotencyKey, className, mu
 
           {/* TODO */}
           {/* <PlaceholderActionBar /> */}
-        </div>
+        </Card>
       </div>
     </div>
   );