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
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
;
@@ -54,12 +54,15 @@ export interface IColumn {
ref?: React.Ref
/** 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 = React.forwardRef((props, ref: React.ForwardedRef): 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 = React.forwardRef((props, ref: React.ForwardedR
)}
-
+
{withHeader && (
= (props) => {
react: handleHotkeyReact,
};
- const username = String(status.getIn(['account', 'acct']));
- const titleMessage = status.visibility === 'direct' ? messages.titleDirect : messages.title;
-
const focusedStatus = (
@@ -488,7 +485,7 @@ const Thread: React.FC = (props) => {
{!isUnderReview ? (
<>
-
+
= (props) => {
{hasDescendants && (
-
+
)}
);
@@ -523,8 +520,10 @@ const Thread: React.FC = (props) => {
return ;
}
+ const titleMessage = status.visibility === 'direct' ? messages.titleDirect : messages.title;
+
return (
-
+
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;