Use gaps between statuses even on mobile

app/soapbox/components/status.tsx

@@ -416,7 +416,7 @@ class Status extends ImmutablePureComponent<IStatus, IStatusState> {
       );
 
       reblogElementMobile = (
-        <div className='pt-4 px-4 sm:hidden truncate'>
+        <div className='pb-5 -mt-2 sm:hidden truncate'>
           <NavLink
             to={`/@${status.getIn(['account', 'acct'])}`}
             onClick={(event) => event.stopPropagation()}
@@ -610,7 +610,6 @@ class Status extends ImmutablePureComponent<IStatus, IStatusState> {
           role='link'
         >
           {prepend}
-          {reblogElementMobile}
 
           <div
             className={classNames({
@@ -622,6 +621,8 @@ class Status extends ImmutablePureComponent<IStatus, IStatusState> {
             })}
             data-id={status.id}
           >
+            {reblogElementMobile}
+
             <div className='mb-4'>
               <HStack justifyContent='between' alignItems='start'>
                 <AccountContainer

app/soapbox/components/status_list.js

@@ -224,10 +224,10 @@ export default class StatusList extends ImmutablePureComponent {
         placeholderCount={20}
         ref={this.setRef}
         className={classNames('divide-y divide-solid divide-gray-200 dark:divide-slate-700', {
-          'sm:divide-none': divideType !== 'border',
+          'divide-none': divideType !== 'border',
         })}
         itemClassName={classNames({
-          'sm:pb-3': divideType !== 'border',
+          'pb-3': divideType !== 'border',
         })}
         {...other}
       >

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

@@ -34,7 +34,7 @@ const Card = React.forwardRef<HTMLDivElement, ICard>(({ children, variant, size
     {...filteredProps}
     className={classNames({
       'space-y-4': true,
-      'bg-white dark:bg-slate-800 text-black dark:text-white sm:shadow-lg dark:sm:shadow-inset overflow-hidden': variant === 'rounded',
+      'bg-white dark:bg-slate-800 text-black dark:text-white shadow-lg dark:shadow-inset overflow-hidden': variant === 'rounded',
       [sizes[size]]: true,
     }, className)}
   >

app/soapbox/components/ui/column/column.tsx

@@ -42,7 +42,7 @@ const Column: React.FC<IColumn> = React.forwardRef((props, ref: React.ForwardedR
 
   const renderChildren = () => {
     if (transparent) {
-      return <div className={classNames('bg-white dark:bg-slate-800 text-black dark:text-white sm:bg-transparent sm:dark:bg-transparent', className)}>{children}</div>;
+      return <div className={classNames('text-black dark:text-white', className)}>{children}</div>;
     }
 
     return (

app/soapbox/features/bookmarks/index.tsx

@@ -38,7 +38,9 @@ const Bookmarks: React.FC = () => {
 
   return (
     <Column transparent>
+      <div className='px-4 pt-4 sm:p-0'>
         <SubNavigation message={intl.formatMessage(messages.heading)} />
+      </div>
       <StatusList
         statusIds={statusIds}
         scrollKey={'bookmarked_statuses'}

app/soapbox/pages/home_page.tsx

@@ -35,7 +35,7 @@ const HomePage: React.FC = ({ children }) => {
 
   return (
     <>
-      <Layout.Main className='divide-y divide-gray-200 dark:divide-slate-700 divide-solid sm:divide-none'>
+      <Layout.Main className='pt-4 sm:pt-0 divide-y divide-gray-200 dark:divide-slate-700 divide-solid space-y-4 divide-none'>
         {me && (
           <Card variant='rounded' ref={composeBlock}>
             <CardBody>

app/styles/components/detailed-status.scss

@@ -167,7 +167,7 @@
 }
 
 .thread {
-  @apply sm:bg-white sm:dark:bg-slate-800 p-4 sm:shadow-xl sm:p-6 sm:rounded-xl;
+  @apply bg-white dark:bg-slate-800 p-4 shadow-xl dark:shadow-inset sm:p-6 sm:rounded-xl;
 
   &__status {
     @apply relative pb-4;

app/styles/components/status.scss

@@ -227,7 +227,7 @@
 }
 
 .status__wrapper {
-  @apply bg-white dark:bg-slate-800 px-4 py-6 sm:shadow-xl dark:sm:shadow-inset sm:p-5 sm:rounded-xl;
+  @apply bg-white dark:bg-slate-800 px-4 py-6 shadow-xl dark:shadow-inset sm:p-5 sm:rounded-xl;
 }
 
 [column-type=filled] .status__wrapper,