From 9e62226bd1cb3e3e297dce659585b4a2f50a7e64 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 5 Apr 2023 13:16:18 -0500
Subject: [PATCH] Make floating column header pretty much work

---
 app/soapbox/components/ui/card/card.tsx     | 4 ++--
 app/soapbox/components/ui/column/column.tsx | 6 ++++--
 app/soapbox/features/status/index.tsx       | 4 ++--
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/app/soapbox/components/ui/card/card.tsx b/app/soapbox/components/ui/card/card.tsx
index d444b75cd..512910410 100644
--- a/app/soapbox/components/ui/card/card.tsx
+++ b/app/soapbox/components/ui/card/card.tsx
@@ -35,7 +35,7 @@ const Card = React.forwardRef<HTMLDivElement, ICard>(({ children, variant = 'def
     ref={ref}
     {...filteredProps}
     className={clsx({
-      'bg-white dark:bg-primary-900 text-gray-900 dark:text-gray-100 shadow-lg dark:shadow-none overflow-hidden': variant === 'rounded',
+      'bg-white dark:bg-primary-900 text-gray-900 dark:text-gray-100 shadow-lg dark:shadow-none': variant === 'rounded',
       [sizes[size]]: variant === 'rounded',
     }, className)}
   >
@@ -74,7 +74,7 @@ const CardHeader: React.FC<ICardHeader> = ({ className, children, backHref, onBa
   };
 
   return (
-    <HStack alignItems='center' space={2} className={clsx('mb-4', className)}>
+    <HStack alignItems='center' space={2} className={className}>
       {renderBackButton()}
 
       {children}
diff --git a/app/soapbox/components/ui/column/column.tsx b/app/soapbox/components/ui/column/column.tsx
index 59743ba8c..6b9dd6175 100644
--- a/app/soapbox/components/ui/column/column.tsx
+++ b/app/soapbox/components/ui/column/column.tsx
@@ -85,8 +85,10 @@ const Column: React.FC<IColumn> = React.forwardRef((props, ref: React.ForwardedR
             label={label}
             backHref={backHref}
             className={clsx({
-              'px-4 pt-4 sm:p-0': transparent,
-              'mb-6': size === 'lg',
+              'sticky top-12 z-10 bg-white dark:bg-primary-900 lg:top-16': !transparent,
+              'p-4 sm:p-0 sm:pb-4': transparent,
+              '-mt-4 py-4': size !== 'lg' && !transparent,
+              '-mt-4 py-4 sm:-mt-6 sm:py-6': size === 'lg' && !transparent,
             })}
             action={action}
           />
diff --git a/app/soapbox/features/status/index.tsx b/app/soapbox/features/status/index.tsx
index 4547441ce..b37c88cb2 100644
--- a/app/soapbox/features/status/index.tsx
+++ b/app/soapbox/features/status/index.tsx
@@ -485,7 +485,7 @@ const Thread: React.FC<IThread> = (props) => {
 
           {!isUnderReview ? (
             <>
-              <hr className='-mx-6 mb-2 border-t-2 dark:border-primary-800' />
+              <hr className='-mx-6 mb-2 max-w-[100vw] border-t-2 dark:border-primary-800' />
 
               <StatusActionBar
                 status={status}
@@ -499,7 +499,7 @@ const Thread: React.FC<IThread> = (props) => {
       </HotKeys>
 
       {hasDescendants && (
-        <hr className='-mx-6 mt-2 border-t-2 dark:border-primary-800' />
+        <hr className='-mx-6 mt-2 max-w-[100vw] border-t-2 dark:border-primary-800' />
       )}
     </div>
   );