From ae5e4c05f66acf9659a4263476863c917d4f7c74 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 30 Nov 2022 21:45:31 -0600
Subject: [PATCH 1/2] ColumnHeader: remove `transparent` prop, pass className
 from Column instead

---
 app/soapbox/components/ui/column/column.tsx | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/app/soapbox/components/ui/column/column.tsx b/app/soapbox/components/ui/column/column.tsx
index 62aede9b2..f25990c2f 100644
--- a/app/soapbox/components/ui/column/column.tsx
+++ b/app/soapbox/components/ui/column/column.tsx
@@ -7,10 +7,10 @@ import { useSoapboxConfig } from 'soapbox/hooks';
 
 import { Card, CardBody, CardHeader, CardTitle } from '../card/card';
 
-type IColumnHeader = Pick<IColumn, 'label' | 'backHref' |'transparent'>;
+type IColumnHeader = Pick<IColumn, 'label' | 'backHref' |'className'>;
 
 /** Contains the column title with optional back button. */
-const ColumnHeader: React.FC<IColumnHeader> = ({ label, backHref, transparent }) => {
+const ColumnHeader: React.FC<IColumnHeader> = ({ label, backHref, className }) => {
   const history = useHistory();
 
   const handleBackClick = () => {
@@ -27,10 +27,7 @@ const ColumnHeader: React.FC<IColumnHeader> = ({ label, backHref, transparent })
   };
 
   return (
-    <CardHeader
-      className={classNames({ 'px-4 pt-4 sm:p-0': transparent })}
-      onBackClick={handleBackClick}
-    >
+    <CardHeader className={className} onBackClick={handleBackClick}>
       <CardTitle title={label} />
     </CardHeader>
   );
@@ -72,7 +69,11 @@ const Column: React.FC<IColumn> = React.forwardRef((props, ref: React.ForwardedR
 
       <Card variant={transparent ? undefined : 'rounded'} className={className}>
         {withHeader && (
-          <ColumnHeader label={label} backHref={backHref} transparent={transparent} />
+          <ColumnHeader
+            label={label}
+            backHref={backHref}
+            className={classNames({ 'px-4 pt-4 sm:p-0': transparent })}
+          />
         )}
 
         <CardBody>

From 69d64c11b438fa1c2d391c8cacb246fa7eb1a0ee Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 30 Nov 2022 21:45:49 -0600
Subject: [PATCH 2/2] Fix spacing of ColumnHeader on Local/Federated timelines

---
 app/soapbox/features/community-timeline/index.tsx | 2 +-
 app/soapbox/features/public-timeline/index.tsx    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/soapbox/features/community-timeline/index.tsx b/app/soapbox/features/community-timeline/index.tsx
index a49093dc6..a5c2a17fa 100644
--- a/app/soapbox/features/community-timeline/index.tsx
+++ b/app/soapbox/features/community-timeline/index.tsx
@@ -40,7 +40,7 @@ const CommunityTimeline = () => {
   }, [onlyMedia]);
 
   return (
-    <Column label={intl.formatMessage(messages.title)} transparent>
+    <Column className='-mt-3 sm:mt-0' label={intl.formatMessage(messages.title)} transparent>
       <PullToRefresh onRefresh={handleRefresh}>
         <Timeline
           scrollKey={`${timelineId}_timeline`}
diff --git a/app/soapbox/features/public-timeline/index.tsx b/app/soapbox/features/public-timeline/index.tsx
index 2e647e2d7..1bcd534a5 100644
--- a/app/soapbox/features/public-timeline/index.tsx
+++ b/app/soapbox/features/public-timeline/index.tsx
@@ -60,7 +60,7 @@ const CommunityTimeline = () => {
   }, [onlyMedia]);
 
   return (
-    <Column label={intl.formatMessage(messages.title)} transparent>
+    <Column className='-mt-3 sm:mt-0' label={intl.formatMessage(messages.title)} transparent>
       <PinnedHostsPicker />
 
       {showExplanationBox && <div className='mb-4'>