Thread: increase spacing around thread, change title to "Post Details"

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. */

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}

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'>

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}",

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;