From 0c15c336ea0feb29f378860f91f120530c7944b3 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 5 Apr 2023 09:30:05 -0500
Subject: [PATCH 01/12] Thread: increase spacing around thread, change title to
 "Post Details"

---
 app/soapbox/components/ui/card/card.tsx     |  4 +++-
 app/soapbox/components/ui/column/column.tsx |  9 ++++++---
 app/soapbox/features/status/index.tsx       | 13 ++++++-------
 app/soapbox/locales/en.json                 |  2 +-
 app/styles/components/detailed-status.scss  |  2 +-
 5 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/app/soapbox/components/ui/card/card.tsx b/app/soapbox/components/ui/card/card.tsx
index aedf3e132..d444b75cd 100644
--- a/app/soapbox/components/ui/card/card.tsx
+++ b/app/soapbox/components/ui/card/card.tsx
@@ -16,11 +16,13 @@ const messages = defineMessages({
   back: { id: 'card.back.label', defaultMessage: 'Back' },
 });
 
+export type CardSizes = keyof typeof sizes
+
 interface ICard {
   /** The type of card. */
   variant?: 'default' | 'rounded'
   /** Card size preset. */
-  size?: keyof typeof sizes
+  size?: CardSizes
   /** Extra classnames for the <div> element. */
   className?: string
   /** Elements inside the card. */
diff --git a/app/soapbox/components/ui/column/column.tsx b/app/soapbox/components/ui/column/column.tsx
index d6cadec77..11ea4c380 100644
--- a/app/soapbox/components/ui/column/column.tsx
+++ b/app/soapbox/components/ui/column/column.tsx
@@ -5,7 +5,7 @@ import { useHistory } from 'react-router-dom';
 import Helmet from 'soapbox/components/helmet';
 import { useSoapboxConfig } from 'soapbox/hooks';
 
-import { Card, CardBody, CardHeader, CardTitle } from '../card/card';
+import { Card, CardBody, CardHeader, CardTitle, type CardSizes } from '../card/card';
 
 type IColumnHeader = Pick<IColumn, 'label' | 'backHref' | 'className' | 'action'>;
 
@@ -54,12 +54,15 @@ export interface IColumn {
   ref?: React.Ref<HTMLDivElement>
   /** Children to display in the column. */
   children?: React.ReactNode
+  /** Action for the ColumnHeader, displayed at the end. */
   action?: React.ReactNode
+  /** Column size, inherited from Card. */
+  size?: CardSizes
 }
 
 /** A backdrop for the main section of the UI. */
 const Column: React.FC<IColumn> = React.forwardRef((props, ref: React.ForwardedRef<HTMLDivElement>): JSX.Element => {
-  const { backHref, children, label, transparent = false, withHeader = true, className, action } = props;
+  const { backHref, children, label, transparent = false, withHeader = true, className, action, size } = props;
   const soapboxConfig = useSoapboxConfig();
 
   return (
@@ -76,7 +79,7 @@ const Column: React.FC<IColumn> = React.forwardRef((props, ref: React.ForwardedR
         )}
       </Helmet>
 
-      <Card variant={transparent ? undefined : 'rounded'} className={className}>
+      <Card size={size} variant={transparent ? undefined : 'rounded'} className={className}>
         {withHeader && (
           <ColumnHeader
             label={label}
diff --git a/app/soapbox/features/status/index.tsx b/app/soapbox/features/status/index.tsx
index b51333883..4547441ce 100644
--- a/app/soapbox/features/status/index.tsx
+++ b/app/soapbox/features/status/index.tsx
@@ -50,7 +50,7 @@ import type {
 } from 'soapbox/types/entities';
 
 const messages = defineMessages({
-  title: { id: 'status.title', defaultMessage: '@{username}\'s Post' },
+  title: { id: 'status.title', defaultMessage: 'Post Details' },
   titleDirect: { id: 'status.title_direct', defaultMessage: 'Direct message' },
   deleteConfirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' },
   deleteHeading: { id: 'confirmations.delete.heading', defaultMessage: 'Delete post' },
@@ -462,9 +462,6 @@ const Thread: React.FC<IThread> = (props) => {
     react: handleHotkeyReact,
   };
 
-  const username = String(status.getIn(['account', 'acct']));
-  const titleMessage = status.visibility === 'direct' ? messages.titleDirect : messages.title;
-
   const focusedStatus = (
     <div className={clsx({ 'pb-4': hasDescendants })} key={status.id}>
       <HotKeys handlers={handlers}>
@@ -488,7 +485,7 @@ const Thread: React.FC<IThread> = (props) => {
 
           {!isUnderReview ? (
             <>
-              <hr className='mb-2 border-t-2 dark:border-primary-800' />
+              <hr className='-mx-6 mb-2 border-t-2 dark:border-primary-800' />
 
               <StatusActionBar
                 status={status}
@@ -502,7 +499,7 @@ const Thread: React.FC<IThread> = (props) => {
       </HotKeys>
 
       {hasDescendants && (
-        <hr className='mt-2 border-t-2 dark:border-primary-800' />
+        <hr className='-mx-6 mt-2 border-t-2 dark:border-primary-800' />
       )}
     </div>
   );
@@ -523,8 +520,10 @@ const Thread: React.FC<IThread> = (props) => {
     return <Redirect to={`/groups/${status.group.id}/posts/${props.params.statusId}`} />;
   }
 
+  const titleMessage = status.visibility === 'direct' ? messages.titleDirect : messages.title;
+
   return (
-    <Column label={intl.formatMessage(titleMessage, { username })} transparent>
+    <Column size='lg' label={intl.formatMessage(titleMessage)}>
       <PullToRefresh onRefresh={handleRefresh}>
         <Stack space={2}>
           <div ref={node} className='thread'>
diff --git a/app/soapbox/locales/en.json b/app/soapbox/locales/en.json
index 145b26e49..e925baa47 100644
--- a/app/soapbox/locales/en.json
+++ b/app/soapbox/locales/en.json
@@ -1456,7 +1456,7 @@
   "status.show_less_all": "Show less for all",
   "status.show_more_all": "Show more for all",
   "status.show_original": "Show original",
-  "status.title": "@{username}'s post",
+  "status.title": "Post Details",
   "status.title_direct": "Direct message",
   "status.translate": "Translate",
   "status.translated_from_with": "Translated from {lang} using {provider}",
diff --git a/app/styles/components/detailed-status.scss b/app/styles/components/detailed-status.scss
index 7b5086776..d70bf924c 100644
--- a/app/styles/components/detailed-status.scss
+++ b/app/styles/components/detailed-status.scss
@@ -1,5 +1,5 @@
 .thread {
-  @apply bg-white dark:bg-primary-900 p-4 shadow-xl dark:shadow-none sm:p-6 sm:rounded-xl;
+  @apply bg-white dark:bg-primary-900 shadow-xl dark:shadow-none sm:rounded-xl;
 
   &__status {
     @apply relative pb-4;

From 96cece3d2e186d4df1b390afc3d96f567915bee8 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 5 Apr 2023 11:36:43 -0500
Subject: [PATCH 02/12] ColumnHeader: increase margin-bottom for size lg
 columns

---
 app/soapbox/components/ui/column/column.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/app/soapbox/components/ui/column/column.tsx b/app/soapbox/components/ui/column/column.tsx
index 11ea4c380..59743ba8c 100644
--- a/app/soapbox/components/ui/column/column.tsx
+++ b/app/soapbox/components/ui/column/column.tsx
@@ -84,7 +84,10 @@ const Column: React.FC<IColumn> = React.forwardRef((props, ref: React.ForwardedR
           <ColumnHeader
             label={label}
             backHref={backHref}
-            className={clsx({ 'px-4 pt-4 sm:p-0': transparent })}
+            className={clsx({
+              'px-4 pt-4 sm:p-0': transparent,
+              'mb-6': size === 'lg',
+            })}
             action={action}
           />
         )}

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 03/12] 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>
   );

From 1c45d575d4c5f185052d472a42b86b3383c822db Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 5 Apr 2023 13:18:53 -0500
Subject: [PATCH 04/12] Fix status placeholder

---
 app/styles/components/status.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/styles/components/status.scss b/app/styles/components/status.scss
index 96bf3aec2..b5a0571c1 100644
--- a/app/styles/components/status.scss
+++ b/app/styles/components/status.scss
@@ -17,7 +17,7 @@
 
 [column-type='filled'] .status__wrapper,
 [column-type='filled'] .status-placeholder {
-  @apply bg-transparent dark:bg-transparent rounded-none shadow-none p-4;
+  @apply bg-transparent dark:bg-transparent rounded-none shadow-none;
 }
 
 .status-check-box {

From d0e7ccb8c809d37b2802b8db6264efcf4c14a66f Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 5 Apr 2023 13:54:43 -0500
Subject: [PATCH 05/12] Column: fix border-radius of sticky header when
 scrolled

---
 app/soapbox/components/ui/column/column.tsx | 23 +++++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/app/soapbox/components/ui/column/column.tsx b/app/soapbox/components/ui/column/column.tsx
index 6b9dd6175..8813b107b 100644
--- a/app/soapbox/components/ui/column/column.tsx
+++ b/app/soapbox/components/ui/column/column.tsx
@@ -1,5 +1,6 @@
 import clsx from 'clsx';
-import React from 'react';
+import throttle from 'lodash/throttle';
+import React, { useCallback, useEffect, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 
 import Helmet from 'soapbox/components/helmet';
@@ -64,6 +65,19 @@ export interface IColumn {
 const Column: React.FC<IColumn> = React.forwardRef((props, ref: React.ForwardedRef<HTMLDivElement>): JSX.Element => {
   const { backHref, children, label, transparent = false, withHeader = true, className, action, size } = props;
   const soapboxConfig = useSoapboxConfig();
+  const [isScrolled, setIsScrolled] = useState(false);
+
+  const handleScroll = useCallback(throttle(() => {
+    setIsScrolled(window.pageYOffset > 32);
+  }, 50), []);
+
+  useEffect(() => {
+    window.addEventListener('scroll', handleScroll);
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, []);
 
   return (
     <div role='region' className='relative' ref={ref} aria-label={label} column-type={transparent ? 'transparent' : 'filled'}>
@@ -85,10 +99,11 @@ const Column: React.FC<IColumn> = React.forwardRef((props, ref: React.ForwardedR
             label={label}
             backHref={backHref}
             className={clsx({
-              'sticky top-12 z-10 bg-white dark:bg-primary-900 lg:top-16': !transparent,
+              'rounded-t-3xl': !isScrolled && !transparent,
+              'sticky top-12 z-10 bg-white/90 dark:bg-primary-900/90 backdrop-blur 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,
+              '-mt-4 -mx-4 p-4': size !== 'lg' && !transparent,
+              '-mt-4 -mx-4 p-4 sm:-mt-6 sm:-mx-6 sm:p-6': size === 'lg' && !transparent,
             })}
             action={action}
           />

From c2f5ac82b8fd85556632cf62884b3ffd65dba070 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 5 Apr 2023 14:45:07 -0500
Subject: [PATCH 06/12] Remove extraneous shadow from detailed-status.scss

---
 app/styles/components/detailed-status.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/styles/components/detailed-status.scss b/app/styles/components/detailed-status.scss
index d70bf924c..d07c31814 100644
--- a/app/styles/components/detailed-status.scss
+++ b/app/styles/components/detailed-status.scss
@@ -1,5 +1,5 @@
 .thread {
-  @apply bg-white dark:bg-primary-900 shadow-xl dark:shadow-none sm:rounded-xl;
+  @apply bg-white dark:bg-primary-900 sm:rounded-xl;
 
   &__status {
     @apply relative pb-4;

From 4481d9227f7cb3bd0d9e6521ca0b7339c0dee0ac Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 5 Apr 2023 15:17:11 -0500
Subject: [PATCH 07/12] Drop thread back to a medium sized card

---
 app/soapbox/features/status/index.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/soapbox/features/status/index.tsx b/app/soapbox/features/status/index.tsx
index b37c88cb2..38be99ba6 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 max-w-[100vw] border-t-2 dark:border-primary-800' />
+              <hr className='-mx-4 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 max-w-[100vw] border-t-2 dark:border-primary-800' />
+        <hr className='-mx-4 mt-2 max-w-[100vw] border-t-2 dark:border-primary-800' />
       )}
     </div>
   );
@@ -523,7 +523,7 @@ const Thread: React.FC<IThread> = (props) => {
   const titleMessage = status.visibility === 'direct' ? messages.titleDirect : messages.title;
 
   return (
-    <Column size='lg' label={intl.formatMessage(titleMessage)}>
+    <Column label={intl.formatMessage(titleMessage)}>
       <PullToRefresh onRefresh={handleRefresh}>
         <Stack space={2}>
           <div ref={node} className='thread'>

From 8831648af7886f2132a7f4cedeb4eac9783f1669 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 5 Apr 2023 15:18:36 -0500
Subject: [PATCH 08/12] CHANGELOG: threads

---
 CHANGELOG.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ee32cbb92..b6bc03ee8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -16,7 +16,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 - Posts: truncate Nostr pubkeys in reply mentions.
 - Posts: upgraded emoji picker component.
+- Posts: improved design of threads.
 - UI: unified design of "approve" and "reject" buttons in follow requests and waitlist.
+- UI: added sticky column header.
 
 ### Fixed
 - Posts: fixed emojis being cut off in reactions modal.

From a5d7841987dffd36815ce07a00575d5412c71756 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 5 Apr 2023 15:21:15 -0500
Subject: [PATCH 09/12] Thread: use a different title for Group posts

---
 app/soapbox/features/status/index.tsx | 8 ++++++--
 app/soapbox/locales/en.json           | 1 +
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/app/soapbox/features/status/index.tsx b/app/soapbox/features/status/index.tsx
index 38be99ba6..96cfa52ab 100644
--- a/app/soapbox/features/status/index.tsx
+++ b/app/soapbox/features/status/index.tsx
@@ -52,6 +52,7 @@ import type {
 const messages = defineMessages({
   title: { id: 'status.title', defaultMessage: 'Post Details' },
   titleDirect: { id: 'status.title_direct', defaultMessage: 'Direct message' },
+  titleGroup: { id: 'status.title_group', defaultMessage: 'Group Post Details' },
   deleteConfirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' },
   deleteHeading: { id: 'confirmations.delete.heading', defaultMessage: 'Delete post' },
   deleteMessage: { id: 'confirmations.delete.message', defaultMessage: 'Are you sure you want to delete this post?' },
@@ -520,10 +521,13 @@ const Thread: React.FC<IThread> = (props) => {
     return <Redirect to={`/groups/${status.group.id}/posts/${props.params.statusId}`} />;
   }
 
-  const titleMessage = status.visibility === 'direct' ? messages.titleDirect : messages.title;
+  const titleMessage = () => {
+    if (status.visibility === 'direct') return messages.titleDirect;
+    return status.group ? messages.titleGroup : messages.title;
+  };
 
   return (
-    <Column label={intl.formatMessage(titleMessage)}>
+    <Column label={intl.formatMessage(titleMessage())}>
       <PullToRefresh onRefresh={handleRefresh}>
         <Stack space={2}>
           <div ref={node} className='thread'>
diff --git a/app/soapbox/locales/en.json b/app/soapbox/locales/en.json
index e925baa47..b122d86a1 100644
--- a/app/soapbox/locales/en.json
+++ b/app/soapbox/locales/en.json
@@ -1457,6 +1457,7 @@
   "status.show_more_all": "Show more for all",
   "status.show_original": "Show original",
   "status.title": "Post Details",
+  "status.title_group": "Group Post Details",
   "status.title_direct": "Direct message",
   "status.translate": "Translate",
   "status.translated_from_with": "Translated from {lang} using {provider}",

From 27d103f79f8594827fa1be355384b13f709e01b2 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 5 Apr 2023 19:30:26 -0500
Subject: [PATCH 10/12] yarn i18n

---
 app/soapbox/locales/en.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/soapbox/locales/en.json b/app/soapbox/locales/en.json
index b122d86a1..e871e7ffe 100644
--- a/app/soapbox/locales/en.json
+++ b/app/soapbox/locales/en.json
@@ -1457,8 +1457,8 @@
   "status.show_more_all": "Show more for all",
   "status.show_original": "Show original",
   "status.title": "Post Details",
-  "status.title_group": "Group Post Details",
   "status.title_direct": "Direct message",
+  "status.title_group": "Group Post Details",
   "status.translate": "Translate",
   "status.translated_from_with": "Translated from {lang} using {provider}",
   "status.unbookmark": "Remove bookmark",

From 09a65a7500fd7fc90abe5f7bc4ec30fa10918f5f Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Mon, 10 Apr 2023 09:33:24 -0500
Subject: [PATCH 11/12] ProfileInfoPanel: fix long usernames x-overflow'ing the
 page

---
 app/soapbox/features/ui/components/profile-info-panel.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/soapbox/features/ui/components/profile-info-panel.tsx b/app/soapbox/features/ui/components/profile-info-panel.tsx
index 22688e4a8..6d407eaab 100644
--- a/app/soapbox/features/ui/components/profile-info-panel.tsx
+++ b/app/soapbox/features/ui/components/profile-info-panel.tsx
@@ -141,7 +141,7 @@ const ProfileInfoPanel: React.FC<IProfileInfoPanel> = ({ account, username }) =>
       <Stack space={2}>
         <Stack>
           <HStack space={1} alignItems='center'>
-            <Text size='lg' weight='bold' dangerouslySetInnerHTML={displayNameHtml} />
+            <Text size='lg' weight='bold' dangerouslySetInnerHTML={displayNameHtml} truncate />
 
             {account.bot && <Badge slug='bot' title={intl.formatMessage(messages.bot)} />}
 
@@ -153,7 +153,7 @@ const ProfileInfoPanel: React.FC<IProfileInfoPanel> = ({ account, username }) =>
           </HStack>
 
           <HStack alignItems='center' space={0.5}>
-            <Text size='sm' theme='muted' direction='ltr'>
+            <Text size='sm' theme='muted' direction='ltr' truncate>
               @{displayFqn ? account.fqn : account.acct}
             </Text>
 

From 8476d69e7bd622742a9b33e1c70d4b5a3856f752 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Mon, 10 Apr 2023 09:53:51 -0500
Subject: [PATCH 12/12] Threads: add a bit of space between the top post and
 column header

---
 app/soapbox/features/status/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/soapbox/features/status/index.tsx b/app/soapbox/features/status/index.tsx
index 96cfa52ab..a9743b48b 100644
--- a/app/soapbox/features/status/index.tsx
+++ b/app/soapbox/features/status/index.tsx
@@ -529,7 +529,7 @@ const Thread: React.FC<IThread> = (props) => {
   return (
     <Column label={intl.formatMessage(titleMessage())}>
       <PullToRefresh onRefresh={handleRefresh}>
-        <Stack space={2}>
+        <Stack space={2} className='mt-2'>
           <div ref={node} className='thread'>
             <ScrollableList
               id='thread'