From 435b7001a46babf879a13e2c0e68d84564ccbc4a Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 4 May 2022 22:58:34 -0500
Subject: [PATCH] Use gaps between statuses even on mobile

---
 app/soapbox/components/status.tsx           | 5 +++--
 app/soapbox/components/status_list.js       | 4 ++--
 app/soapbox/components/ui/card/card.tsx     | 2 +-
 app/soapbox/components/ui/column/column.tsx | 2 +-
 app/soapbox/features/bookmarks/index.tsx    | 4 +++-
 app/soapbox/pages/home_page.tsx             | 2 +-
 app/styles/components/detailed-status.scss  | 2 +-
 app/styles/components/status.scss           | 2 +-
 8 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/app/soapbox/components/status.tsx b/app/soapbox/components/status.tsx
index 60c6ebcdb..f2b804fbe 100644
--- a/app/soapbox/components/status.tsx
+++ b/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
diff --git a/app/soapbox/components/status_list.js b/app/soapbox/components/status_list.js
index a1f35b841..7df03f365 100644
--- a/app/soapbox/components/status_list.js
+++ b/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}
       >
diff --git a/app/soapbox/components/ui/card/card.tsx b/app/soapbox/components/ui/card/card.tsx
index 701477ac7..350048a02 100644
--- a/app/soapbox/components/ui/card/card.tsx
+++ b/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)}
   >
diff --git a/app/soapbox/components/ui/column/column.tsx b/app/soapbox/components/ui/column/column.tsx
index 959c555b6..dde81736a 100644
--- a/app/soapbox/components/ui/column/column.tsx
+++ b/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 (
diff --git a/app/soapbox/features/bookmarks/index.tsx b/app/soapbox/features/bookmarks/index.tsx
index 90aae0c1f..288feff96 100644
--- a/app/soapbox/features/bookmarks/index.tsx
+++ b/app/soapbox/features/bookmarks/index.tsx
@@ -38,7 +38,9 @@ const Bookmarks: React.FC = () => {
 
   return (
     <Column transparent>
-      <SubNavigation message={intl.formatMessage(messages.heading)} />
+      <div className='px-4 pt-4 sm:p-0'>
+        <SubNavigation message={intl.formatMessage(messages.heading)} />
+      </div>
       <StatusList
         statusIds={statusIds}
         scrollKey={'bookmarked_statuses'}
diff --git a/app/soapbox/pages/home_page.tsx b/app/soapbox/pages/home_page.tsx
index 9e81f88bf..5c81ad901 100644
--- a/app/soapbox/pages/home_page.tsx
+++ b/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>
diff --git a/app/styles/components/detailed-status.scss b/app/styles/components/detailed-status.scss
index bbd9330ef..171375743 100644
--- a/app/styles/components/detailed-status.scss
+++ b/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;
diff --git a/app/styles/components/status.scss b/app/styles/components/status.scss
index 555cf7b79..5fa2afd8f 100644
--- a/app/styles/components/status.scss
+++ b/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,