From 9ca08fc1705713dff1075bd5de1a170c67e1a0c4 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sat, 1 Jun 2024 12:15:19 -0500
Subject: [PATCH] Condense feeds on mobile
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 src/features/bookmarks/index.tsx          |  6 ++++--
 src/features/community-timeline/index.tsx |  6 ++++--
 src/features/hashtag-timeline/index.tsx   |  6 ++++--
 src/features/home-timeline/index.tsx      |  6 ++++--
 src/features/landing-timeline/index.tsx   |  6 ++++--
 src/features/list-timeline/index.tsx      |  6 ++++--
 src/features/public-timeline/index.tsx    |  6 ++++--
 src/features/quotes/index.tsx             |  6 ++++--
 src/features/remote-timeline/index.tsx    |  6 ++++--
 src/features/test-timeline/index.tsx      |  6 ++++--
 src/features/ui/components/navbar.tsx     | 11 ++++++++++-
 src/hooks/useIsMobile.ts                  |  6 ++++++
 src/hooks/useScreenWidth.ts               | 19 +++++++++++++++++++
 src/pages/home-page.tsx                   |  7 +++++--
 14 files changed, 80 insertions(+), 23 deletions(-)
 create mode 100644 src/hooks/useIsMobile.ts
 create mode 100644 src/hooks/useScreenWidth.ts

diff --git a/src/features/bookmarks/index.tsx b/src/features/bookmarks/index.tsx
index 7c9b9b761..3e233c519 100644
--- a/src/features/bookmarks/index.tsx
+++ b/src/features/bookmarks/index.tsx
@@ -12,6 +12,7 @@ import PullToRefresh from 'soapbox/components/pull-to-refresh';
 import StatusList from 'soapbox/components/status-list';
 import { Column } from 'soapbox/components/ui';
 import { useAppSelector, useAppDispatch, useTheme } from 'soapbox/hooks';
+import { useIsMobile } from 'soapbox/hooks/useIsMobile';
 import toast from 'soapbox/toast';
 
 const messages = defineMessages({
@@ -40,6 +41,7 @@ const Bookmarks: React.FC<IBookmarks> = ({ params }) => {
   const intl = useIntl();
   const history = useHistory();
   const theme = useTheme();
+  const isMobile = useIsMobile();
 
   const folderId = params?.id;
 
@@ -102,7 +104,7 @@ const Bookmarks: React.FC<IBookmarks> = ({ params }) => {
     <Column
       label={folder ? folder.name : intl.formatMessage(messages.heading)}
       action={<DropdownMenu items={items} src={require('@tabler/icons/outline/dots-vertical.svg')} />}
-      transparent
+      transparent={!isMobile}
     >
       <PullToRefresh onRefresh={handleRefresh}>
         <StatusList
@@ -113,7 +115,7 @@ const Bookmarks: React.FC<IBookmarks> = ({ params }) => {
           isLoading={typeof isLoading === 'boolean' ? isLoading : true}
           onLoadMore={() => handleLoadMore(dispatch, folderId)}
           emptyMessage={emptyMessage}
-          divideType={theme === 'black' ? 'border' : 'space'}
+          divideType={(theme === 'black' || isMobile) ? 'border' : 'space'}
         />
       </PullToRefresh>
     </Column>
diff --git a/src/features/community-timeline/index.tsx b/src/features/community-timeline/index.tsx
index 5d546f1d5..96f66bdfe 100644
--- a/src/features/community-timeline/index.tsx
+++ b/src/features/community-timeline/index.tsx
@@ -6,6 +6,7 @@ import { useCommunityStream } from 'soapbox/api/hooks';
 import PullToRefresh from 'soapbox/components/pull-to-refresh';
 import { Column } from 'soapbox/components/ui';
 import { useAppSelector, useAppDispatch, useSettings, useTheme } from 'soapbox/hooks';
+import { useIsMobile } from 'soapbox/hooks/useIsMobile';
 
 import Timeline from '../ui/components/timeline';
 
@@ -23,6 +24,7 @@ const CommunityTimeline = () => {
   const next = useAppSelector(state => state.timelines.get('community')?.next);
 
   const timelineId = 'community';
+  const isMobile = useIsMobile();
 
   const handleLoadMore = (maxId: string) => {
     dispatch(expandCommunityTimeline({ url: next, maxId, onlyMedia }));
@@ -37,7 +39,7 @@ const CommunityTimeline = () => {
   }, [onlyMedia]);
 
   return (
-    <Column className='-mt-3 sm:mt-0' label={intl.formatMessage(messages.title)} transparent>
+    <Column className='-mt-3 sm:mt-0' label={intl.formatMessage(messages.title)} transparent={!isMobile}>
       <PullToRefresh onRefresh={handleRefresh}>
         <Timeline
           className='black:p-4 black:sm:p-5'
@@ -46,7 +48,7 @@ const CommunityTimeline = () => {
           prefix='home'
           onLoadMore={handleLoadMore}
           emptyMessage={<FormattedMessage id='empty_column.community' defaultMessage='The local timeline is empty. Write something publicly to get the ball rolling!' />}
-          divideType={theme === 'black' ? 'border' : 'space'}
+          divideType={(theme === 'black' || isMobile) ? 'border' : 'space'}
         />
       </PullToRefresh>
     </Column>
diff --git a/src/features/hashtag-timeline/index.tsx b/src/features/hashtag-timeline/index.tsx
index 397cbb916..5e0254b4f 100644
--- a/src/features/hashtag-timeline/index.tsx
+++ b/src/features/hashtag-timeline/index.tsx
@@ -8,6 +8,7 @@ import List, { ListItem } from 'soapbox/components/list';
 import { Column, Toggle } from 'soapbox/components/ui';
 import Timeline from 'soapbox/features/ui/components/timeline';
 import { useAppDispatch, useAppSelector, useFeatures, useLoggedIn, useTheme } from 'soapbox/hooks';
+import { useIsMobile } from 'soapbox/hooks/useIsMobile';
 
 interface IHashtagTimeline {
   params?: {
@@ -24,6 +25,7 @@ const HashtagTimeline: React.FC<IHashtagTimeline> = ({ params }) => {
   const next = useAppSelector(state => state.timelines.get(`hashtag:${id}`)?.next);
   const { isLoggedIn } = useLoggedIn();
   const theme = useTheme();
+  const isMobile = useIsMobile();
 
   const handleLoadMore = (maxId: string) => {
     dispatch(expandHashtagTimeline(id, { url: next, maxId }));
@@ -50,7 +52,7 @@ const HashtagTimeline: React.FC<IHashtagTimeline> = ({ params }) => {
   }, [id]);
 
   return (
-    <Column label={`#${id}`} transparent>
+    <Column label={`#${id}`} transparent={!isMobile}>
       {features.followHashtags && isLoggedIn && (
         <List>
           <ListItem
@@ -69,7 +71,7 @@ const HashtagTimeline: React.FC<IHashtagTimeline> = ({ params }) => {
         timelineId={`hashtag:${id}`}
         onLoadMore={handleLoadMore}
         emptyMessage={<FormattedMessage id='empty_column.hashtag' defaultMessage='There is nothing in this hashtag yet.' />}
-        divideType={theme === 'black' ? 'border' : 'space'}
+        divideType={(theme === 'black' || isMobile) ? 'border' : 'space'}
       />
     </Column>
   );
diff --git a/src/features/home-timeline/index.tsx b/src/features/home-timeline/index.tsx
index 87805b245..2fea73d32 100644
--- a/src/features/home-timeline/index.tsx
+++ b/src/features/home-timeline/index.tsx
@@ -7,6 +7,7 @@ import PullToRefresh from 'soapbox/components/pull-to-refresh';
 import { Column, Stack, Text } from 'soapbox/components/ui';
 import Timeline from 'soapbox/features/ui/components/timeline';
 import { useAppSelector, useAppDispatch, useFeatures, useInstance, useTheme } from 'soapbox/hooks';
+import { useIsMobile } from 'soapbox/hooks/useIsMobile';
 
 const messages = defineMessages({
   title: { id: 'column.home', defaultMessage: 'Home' },
@@ -20,6 +21,7 @@ const HomeTimeline: React.FC = () => {
   const theme = useTheme();
 
   const polling = useRef<NodeJS.Timeout | null>(null);
+  const isMobile = useIsMobile();
 
   const isPartial = useAppSelector(state => state.timelines.get('home')?.isPartial === true);
   const next = useAppSelector(state => state.timelines.get('home')?.next);
@@ -58,14 +60,14 @@ const HomeTimeline: React.FC = () => {
   }, [isPartial]);
 
   return (
-    <Column label={intl.formatMessage(messages.title)} transparent withHeader={false}>
+    <Column label={intl.formatMessage(messages.title)} transparent={!isMobile} withHeader={false}>
       <PullToRefresh onRefresh={handleRefresh}>
         <Timeline
           className='black:p-4 black:sm:p-5'
           scrollKey='home_timeline'
           onLoadMore={handleLoadMore}
           timelineId='home'
-          divideType={theme === 'black' ? 'border' : 'space'}
+          divideType={(theme === 'black' || isMobile) ? 'border' : 'space'}
           showAds
           emptyMessage={
             <Stack space={1}>
diff --git a/src/features/landing-timeline/index.tsx b/src/features/landing-timeline/index.tsx
index 868644e50..0ee97c7f2 100644
--- a/src/features/landing-timeline/index.tsx
+++ b/src/features/landing-timeline/index.tsx
@@ -6,6 +6,7 @@ import { useCommunityStream } from 'soapbox/api/hooks';
 import PullToRefresh from 'soapbox/components/pull-to-refresh';
 import { Column } from 'soapbox/components/ui';
 import { useAppSelector, useAppDispatch, useInstance, useTheme } from 'soapbox/hooks';
+import { useIsMobile } from 'soapbox/hooks/useIsMobile';
 
 import AboutPage from '../about';
 import Timeline from '../ui/components/timeline';
@@ -16,6 +17,7 @@ const LandingTimeline = () => {
   const dispatch = useAppDispatch();
   const instance = useInstance();
   const theme = useTheme();
+  const isMobile = useIsMobile();
 
   const timelineEnabled = !instance.pleroma.metadata.restrict_unauthenticated.timelines.local;
   const next = useAppSelector(state => state.timelines.get('community')?.next);
@@ -43,7 +45,7 @@ const LandingTimeline = () => {
   }, []);
 
   return (
-    <Column transparent withHeader={false}>
+    <Column transparent={!isMobile} withHeader={false}>
       <div className='my-12 mb-16 px-4 sm:mb-20'>
         <SiteBanner />
       </div>
@@ -57,7 +59,7 @@ const LandingTimeline = () => {
             prefix='home'
             onLoadMore={handleLoadMore}
             emptyMessage={<FormattedMessage id='empty_column.community' defaultMessage='The local timeline is empty. Write something publicly to get the ball rolling!' />}
-            divideType={theme === 'black' ? 'border' : 'space'}
+            divideType={(theme === 'black' || isMobile) ? 'border' : 'space'}
           />
         </PullToRefresh>
       ) : (
diff --git a/src/features/list-timeline/index.tsx b/src/features/list-timeline/index.tsx
index e0cef0ac8..001dccff3 100644
--- a/src/features/list-timeline/index.tsx
+++ b/src/features/list-timeline/index.tsx
@@ -10,6 +10,7 @@ import DropdownMenu from 'soapbox/components/dropdown-menu';
 import MissingIndicator from 'soapbox/components/missing-indicator';
 import { Column, Button, Spinner } from 'soapbox/components/ui';
 import { useAppDispatch, useAppSelector, useTheme } from 'soapbox/hooks';
+import { useIsMobile } from 'soapbox/hooks/useIsMobile';
 
 import Timeline from '../ui/components/timeline';
 
@@ -26,6 +27,7 @@ const ListTimeline: React.FC = () => {
   const dispatch = useAppDispatch();
   const { id } = useParams<{ id: string }>();
   const theme = useTheme();
+  const isMobile = useIsMobile();
 
   const list = useAppSelector((state) => state.lists.get(id));
   const next = useAppSelector(state => state.timelines.get(`list:${id}`)?.next);
@@ -99,7 +101,7 @@ const ListTimeline: React.FC = () => {
     <Column
       label={title}
       action={<DropdownMenu items={items} src={require('@tabler/icons/outline/dots-vertical.svg')} />}
-      transparent
+      transparent={!isMobile}
     >
       <Timeline
         className='black:p-4 black:sm:p-5'
@@ -107,7 +109,7 @@ const ListTimeline: React.FC = () => {
         timelineId={`list:${id}`}
         onLoadMore={handleLoadMore}
         emptyMessage={emptyMessage}
-        divideType={theme === 'black' ? 'border' : 'space'}
+        divideType={(theme === 'black' || isMobile) ? 'border' : 'space'}
       />
     </Column>
   );
diff --git a/src/features/public-timeline/index.tsx b/src/features/public-timeline/index.tsx
index bbdfd4a10..539df4efc 100644
--- a/src/features/public-timeline/index.tsx
+++ b/src/features/public-timeline/index.tsx
@@ -8,6 +8,7 @@ import { usePublicStream } from 'soapbox/api/hooks';
 import PullToRefresh from 'soapbox/components/pull-to-refresh';
 import { Accordion, Column } from 'soapbox/components/ui';
 import { useAppSelector, useAppDispatch, useInstance, useSettings, useTheme } from 'soapbox/hooks';
+import { useIsMobile } from 'soapbox/hooks/useIsMobile';
 
 import PinnedHostsPicker from '../remote-timeline/components/pinned-hosts-picker';
 import Timeline from '../ui/components/timeline';
@@ -28,6 +29,7 @@ const CommunityTimeline = () => {
   const next = useAppSelector(state => state.timelines.get('public')?.next);
 
   const timelineId = 'public';
+  const isMobile = useIsMobile();
 
   const explanationBoxExpanded = settings.explanationBox;
   const showExplanationBox = settings.showExplanationBox;
@@ -53,7 +55,7 @@ const CommunityTimeline = () => {
   }, [onlyMedia]);
 
   return (
-    <Column className='-mt-3 sm:mt-0' label={intl.formatMessage(messages.title)} transparent>
+    <Column className='-mt-3 sm:mt-0' label={intl.formatMessage(messages.title)} transparent={!isMobile}>
       <PinnedHostsPicker />
 
       {showExplanationBox && <div className='mb-4 black:mx-4'>
@@ -91,7 +93,7 @@ const CommunityTimeline = () => {
           prefix='home'
           onLoadMore={handleLoadMore}
           emptyMessage={<FormattedMessage id='empty_column.public' defaultMessage='There is nothing here! Write something publicly, or manually follow users from other servers to fill it up' />}
-          divideType={theme === 'black' ? 'border' : 'space'}
+          divideType={(theme === 'black' || isMobile) ? 'border' : 'space'}
         />
       </PullToRefresh>
     </Column>
diff --git a/src/features/quotes/index.tsx b/src/features/quotes/index.tsx
index 2d7187c9b..78b79d316 100644
--- a/src/features/quotes/index.tsx
+++ b/src/features/quotes/index.tsx
@@ -8,6 +8,7 @@ import { expandStatusQuotes, fetchStatusQuotes } from 'soapbox/actions/status-qu
 import StatusList from 'soapbox/components/status-list';
 import { Column } from 'soapbox/components/ui';
 import { useAppDispatch, useAppSelector, useTheme } from 'soapbox/hooks';
+import { useIsMobile } from 'soapbox/hooks/useIsMobile';
 
 const messages = defineMessages({
   heading: { id: 'column.quotes', defaultMessage: 'Post quotes' },
@@ -21,6 +22,7 @@ const Quotes: React.FC = () => {
   const intl = useIntl();
   const { statusId } = useParams<{ statusId: string }>();
   const theme = useTheme();
+  const isMobile = useIsMobile();
 
   const statusIds = useAppSelector((state) => state.status_lists.getIn([`quotes:${statusId}`, 'items'], ImmutableOrderedSet<string>()));
   const isLoading = useAppSelector((state) => state.status_lists.getIn([`quotes:${statusId}`, 'isLoading'], true));
@@ -37,7 +39,7 @@ const Quotes: React.FC = () => {
   const emptyMessage = <FormattedMessage id='empty_column.quotes' defaultMessage='This post has not been quoted yet.' />;
 
   return (
-    <Column label={intl.formatMessage(messages.heading)} transparent>
+    <Column label={intl.formatMessage(messages.heading)} transparent={!isMobile}>
       <StatusList
         className='black:p-4 black:sm:p-5'
         statusIds={statusIds as ImmutableOrderedSet<string>}
@@ -47,7 +49,7 @@ const Quotes: React.FC = () => {
         onLoadMore={() => handleLoadMore(statusId, dispatch)}
         onRefresh={handleRefresh}
         emptyMessage={emptyMessage}
-        divideType={theme === 'black' ? 'border' : 'space'}
+        divideType={(theme === 'black' || isMobile) ? 'border' : 'space'}
       />
     </Column>
   );
diff --git a/src/features/remote-timeline/index.tsx b/src/features/remote-timeline/index.tsx
index 391ae6fa3..5cbba21f1 100644
--- a/src/features/remote-timeline/index.tsx
+++ b/src/features/remote-timeline/index.tsx
@@ -7,6 +7,7 @@ import { useRemoteStream } from 'soapbox/api/hooks';
 import IconButton from 'soapbox/components/icon-button';
 import { Column, HStack, Text } from 'soapbox/components/ui';
 import { useAppSelector, useAppDispatch, useSettings, useTheme } from 'soapbox/hooks';
+import { useIsMobile } from 'soapbox/hooks/useIsMobile';
 
 import Timeline from '../ui/components/timeline';
 
@@ -32,6 +33,7 @@ const RemoteTimeline: React.FC<IRemoteTimeline> = ({ params }) => {
   const next = useAppSelector(state => state.timelines.get('remote')?.next);
 
   const pinned = settings.remote_timeline.pinnedHosts.includes(instance);
+  const isMobile = useIsMobile();
 
   const handleCloseClick: React.MouseEventHandler = () => {
     history.push('/timeline/fediverse');
@@ -48,7 +50,7 @@ const RemoteTimeline: React.FC<IRemoteTimeline> = ({ params }) => {
   }, [onlyMedia]);
 
   return (
-    <Column label={instance} transparent>
+    <Column label={instance} transparent={!isMobile}>
       {instance && <PinnedHostsPicker host={instance} />}
 
       {!pinned && (
@@ -76,7 +78,7 @@ const RemoteTimeline: React.FC<IRemoteTimeline> = ({ params }) => {
             values={{ instance }}
           />
         }
-        divideType={theme === 'black' ? 'border' : 'space'}
+        divideType={(theme === 'black' || isMobile) ? 'border' : 'space'}
       />
     </Column>
   );
diff --git a/src/features/test-timeline/index.tsx b/src/features/test-timeline/index.tsx
index 308f78e22..b3e35b12e 100644
--- a/src/features/test-timeline/index.tsx
+++ b/src/features/test-timeline/index.tsx
@@ -4,6 +4,7 @@ import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 import { importFetchedStatuses } from 'soapbox/actions/importer';
 import { expandTimelineSuccess } from 'soapbox/actions/timelines';
 import { useAppDispatch, useTheme } from 'soapbox/hooks';
+import { useIsMobile } from 'soapbox/hooks/useIsMobile';
 
 import { Column } from '../../components/ui';
 import Timeline from '../ui/components/timeline';
@@ -31,6 +32,7 @@ const TestTimeline: React.FC = () => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
   const theme = useTheme();
+  const isMobile = useIsMobile();
 
   React.useEffect(() => {
     dispatch(importFetchedStatuses(MOCK_STATUSES));
@@ -38,12 +40,12 @@ const TestTimeline: React.FC = () => {
   }, []);
 
   return (
-    <Column label={intl.formatMessage(messages.title)} transparent>
+    <Column label={intl.formatMessage(messages.title)} transparent={!isMobile}>
       <Timeline
         scrollKey={`${timelineId}_timeline`}
         timelineId={`${timelineId}${onlyMedia ? ':media' : ''}`}
         emptyMessage={<FormattedMessage id='empty_column.test' defaultMessage='The test timeline is empty.' />}
-        divideType={theme === 'black' ? 'border' : 'space'}
+        divideType={(theme === 'black' || isMobile) ? 'border' : 'space'}
       />
     </Column>
   );
diff --git a/src/features/ui/components/navbar.tsx b/src/features/ui/components/navbar.tsx
index 4b9fc8593..7a208e39b 100644
--- a/src/features/ui/components/navbar.tsx
+++ b/src/features/ui/components/navbar.tsx
@@ -10,6 +10,7 @@ import SiteLogo from 'soapbox/components/site-logo';
 import { Avatar, Button, Form, HStack, IconButton, Input, Tooltip } from 'soapbox/components/ui';
 import Search from 'soapbox/features/compose/components/search';
 import { useAppDispatch, useFeatures, useOwnAccount, useRegistrationStatus } from 'soapbox/hooks';
+import { useIsMobile } from 'soapbox/hooks/useIsMobile';
 
 import ProfileDropdown from './profile-dropdown';
 
@@ -30,6 +31,7 @@ const Navbar = () => {
   const { isOpen } = useRegistrationStatus();
   const { account } = useOwnAccount();
   const node = useRef(null);
+  const isMobile = useIsMobile();
 
   const [isLoading, setLoading] = useState<boolean>(false);
   const [username, setUsername] = useState<string>('');
@@ -65,7 +67,14 @@ const Navbar = () => {
   if (mfaToken) return <Redirect to={`/login?token=${encodeURIComponent(mfaToken)}`} />;
 
   return (
-    <nav className='sticky top-0 z-50 bg-white shadow black:border-b black:border-b-gray-800 black:bg-black dark:bg-primary-900' ref={node} data-testid='navbar'>
+    <nav
+      className={clsx(
+        'sticky top-0 z-50 border-gray-200 bg-white shadow black:border-b black:border-b-gray-800 black:bg-black dark:border-gray-800 dark:bg-primary-900',
+        { 'border-b': isMobile },
+      )}
+      ref={node}
+      data-testid='navbar'
+    >
       <div className='mx-auto max-w-7xl px-2 sm:px-6 lg:px-8'>
         <div className='relative flex h-12 justify-between lg:h-16'>
           {account && (
diff --git a/src/hooks/useIsMobile.ts b/src/hooks/useIsMobile.ts
new file mode 100644
index 000000000..2bfbafdc2
--- /dev/null
+++ b/src/hooks/useIsMobile.ts
@@ -0,0 +1,6 @@
+import { useScreenWidth } from './useScreenWidth';
+
+export function useIsMobile() {
+  const screenWidth = useScreenWidth();
+  return screenWidth <= 581;
+}
\ No newline at end of file
diff --git a/src/hooks/useScreenWidth.ts b/src/hooks/useScreenWidth.ts
new file mode 100644
index 000000000..cfdbf7ca6
--- /dev/null
+++ b/src/hooks/useScreenWidth.ts
@@ -0,0 +1,19 @@
+import { useState, useEffect } from 'react';
+
+export function useScreenWidth() {
+  const [screenWidth, setScreenWidth] = useState(window.innerWidth);
+
+  useEffect(() => {
+    const checkWindowSize = () => {
+      setScreenWidth(window.innerWidth);
+    };
+
+    window.addEventListener('resize', checkWindowSize);
+
+    return () => {
+      window.removeEventListener('resize', checkWindowSize);
+    };
+  }, []);
+
+  return screenWidth;
+}
\ No newline at end of file
diff --git a/src/pages/home-page.tsx b/src/pages/home-page.tsx
index e6a9ce81f..08370963a 100644
--- a/src/pages/home-page.tsx
+++ b/src/pages/home-page.tsx
@@ -16,6 +16,7 @@ import {
   AnnouncementsPanel,
 } from 'soapbox/features/ui/util/async-components';
 import { useAppSelector, useOwnAccount, useFeatures, useSoapboxConfig, useDraggedFiles, useAppDispatch } from 'soapbox/hooks';
+import { useIsMobile } from 'soapbox/hooks/useIsMobile';
 
 import { Avatar, Card, CardBody, HStack, Layout } from '../components/ui';
 import ComposeForm from '../features/compose/components/compose-form';
@@ -35,6 +36,7 @@ const HomePage: React.FC<IHomePage> = ({ children }) => {
 
   const composeId = 'home';
   const composeBlock = useRef<HTMLDivElement>(null);
+  const isMobile = useIsMobile();
 
   const hasCrypto = typeof soapboxConfig.cryptoAddresses.getIn([0, 'ticker']) === 'string';
   const cryptoLimit = soapboxConfig.cryptoDonatePanel.get('limit', 0);
@@ -48,12 +50,13 @@ const HomePage: React.FC<IHomePage> = ({ children }) => {
 
   return (
     <>
-      <Layout.Main className='space-y-3 pt-3 black:space-y-0 sm:pt-0 dark:divide-gray-800'>
+      <Layout.Main className={clsx('black:space-y-0 dark:divide-gray-800', { 'pt-3 sm:pt-0 space-y-3': !isMobile })}>
         {me && (
           <Card
-            className={clsx('relative z-[1] transition black:border-b black:border-gray-800', {
+            className={clsx('relative z-[1] border-gray-200 transition black:border-b black:border-gray-800 dark:border-gray-800', {
               'border-2 border-primary-600 border-dashed z-[99]': isDragging,
               'ring-2 ring-offset-2 ring-primary-600': isDraggedOver,
+              'border-b': isMobile,
             })}
             variant='rounded'
             ref={composeBlock}