Improve spacing of Notifications and Search on mobile

src/components/ui/column/column.tsx

@@ -104,8 +104,8 @@ const Column: React.FC<IColumn> = React.forwardRef((props, ref: React.ForwardedR
               'rounded-t-3xl': !isScrolled && !transparent,
               'sticky top-12 z-10 bg-white/90 dark:bg-primary-900/90 black:bg-black/90 backdrop-blur lg:top-16': !transparent,
               'p-4 sm:p-0 sm:pb-4 black:p-4': transparent,
-              '-mt-4 -mx-4 p-4': size !== 'lg' && !transparent,
+              '-mt-4 p-4': size !== 'lg' && !transparent,
-              '-mt-4 -mx-4 p-4 sm:-mt-6 sm:-mx-6 sm:p-6': size === 'lg' && !transparent,
+              '-mt-4 p-4 sm:-mt-6 sm:-mx-6 sm:p-6': size === 'lg' && !transparent,
             })}
             action={action}
           />

src/features/compose/components/search-results.tsx

@@ -148,6 +148,7 @@ const SearchResults = () => {
           id={statusId}
           onMoveUp={handleMoveUp}
           onMoveDown={handleMoveDown}
+          variant='slim'
         />
       ));
       resultsIds = results.statuses;
@@ -159,6 +160,7 @@ const SearchResults = () => {
           id={statusId}
           onMoveUp={handleMoveUp}
           onMoveDown={handleMoveDown}
+          variant='slim'
         />
       ));
       resultsIds = trendingStatuses;
@@ -229,7 +231,7 @@ const SearchResults = () => {
           listClassName={clsx({
             'divide-gray-200 dark:divide-gray-800 divide-solid divide-y': selectedFilter === 'statuses',
           })}
-          itemClassName={clsx({
+          itemClassName={clsx('px-4', {
             'pb-4': selectedFilter === 'accounts',
             'pb-3': selectedFilter === 'hashtags',
           })}

src/features/home-timeline/index.tsx

@@ -70,7 +70,6 @@ const HomeTimeline: React.FC = () => {
           onLoadMore={handleLoadMore}
           timelineId='home'
           divideType={(theme === 'black' || isMobile) ? 'border' : 'space'}
-          showAds
           emptyMessage={
             <Stack space={1}>
               <Text size='xl' weight='medium' align='center'>

src/features/notifications/index.tsx

@@ -16,7 +16,8 @@ import ScrollTopButton from 'soapbox/components/scroll-top-button';
 import ScrollableList from 'soapbox/components/scrollable-list';
 import { Column, Portal } from 'soapbox/components/ui';
 import PlaceholderNotification from 'soapbox/features/placeholder/components/placeholder-notification';
-import { useAppDispatch, useAppSelector, useSettings } from 'soapbox/hooks';
+import { useAppDispatch, useAppSelector, useSettings, useTheme } from 'soapbox/hooks';
+import { useIsMobile } from 'soapbox/hooks/useIsMobile';
 
 import FilterBar from './components/filter-bar';
 import Notification from './components/notification';
@@ -58,6 +59,9 @@ const Notifications = () => {
   const hasMore = useAppSelector(state => state.notifications.hasMore);
   const totalQueuedNotificationsCount = useAppSelector(state => state.notifications.totalQueuedNotificationsCount || 0);
 
+  const theme = useTheme();
+  const isMobile = useIsMobile();
+
   const node = useRef<VirtuosoHandle>(null);
   const column = useRef<HTMLDivElement>(null);
   const scrollableContentRef = useRef<ImmutableList<JSX.Element> | null>(null);
@@ -174,7 +178,12 @@ const Notifications = () => {
   );
 
   return (
-    <Column ref={column} label={intl.formatMessage(messages.title)} withHeader={false}>
+    <Column
+      ref={column}
+      label={intl.formatMessage(messages.title)}
+      withHeader={false}
+      className={clsx({ '!p-0': isMobile || theme === 'black' })}
+    >
       {filterBarContainer}
 
       <Portal>

src/features/search/index.tsx

@@ -1,9 +1,12 @@
+import clsx from 'clsx';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { Column } from 'soapbox/components/ui';
 import Search from 'soapbox/features/compose/components/search';
 import SearchResults from 'soapbox/features/compose/components/search-results';
+import { useTheme } from 'soapbox/hooks';
+import { useIsMobile } from 'soapbox/hooks/useIsMobile';
 
 const messages = defineMessages({
   heading: { id: 'column.search', defaultMessage: 'Discover' },
@@ -12,10 +15,18 @@ const messages = defineMessages({
 const SearchPage = () => {
   const intl = useIntl();
 
+  const theme = useTheme();
+  const isMobile = useIsMobile();
+
   return (
-    <Column label={intl.formatMessage(messages.heading)}>
+    <Column
+      label={intl.formatMessage(messages.heading)}
+      className={clsx({ '!px-0': isMobile || theme === 'black' })}
+    >
       <div className='space-y-4'>
-        <Search autoFocus autoSubmit />
+        <div className='px-4 sm:py-0'>
+          <Search autoFocus autoSubmit />
+        </div>
         <SearchResults />
       </div>
     </Column>