Update: Replace 'feature' with 'action' and remove 'feature'

src/components/ui/column/column.tsx

@@ -59,15 +59,15 @@ export interface IColumn {
   children?: React.ReactNode;
   /** Action for the ColumnHeader, displayed at the end. */
   action?: React.ReactNode;
+  /** Determines if the action for the ColumnHeader is displayed on the right. */
+  actionRightPosition?: boolean;
   /** Column size, inherited from Card. */
   size?: CardSizes;
-  /** Extra feature. */
-  feature?: JSX.Element;
 }
 
 /** A backdrop for the main section of the UI. */
 const Column = React.forwardRef<HTMLDivElement, IColumn>((props, ref): JSX.Element => {
-  const { backHref, children, label, transparent = false, withHeader = true, className, bodyClassName, action, size, feature } = props;
+  const { backHref, children, label, transparent = false, withHeader = true, className, bodyClassName, action, actionRightPosition, size } = props;
   const soapboxConfig = useSoapboxConfig();
   const [isScrolled, setIsScrolled] = useState(false);
 
@@ -99,7 +99,6 @@ const Column = React.forwardRef<HTMLDivElement, IColumn>((props, ref): JSX.Eleme
 
       <Card size={size} variant={transparent ? undefined : 'rounded'} className={className}>
         {withHeader && (
-          <div className='flex justify-between'>
           <ColumnHeader
             label={label}
             backHref={backHref}
@@ -109,13 +108,10 @@ const Column = React.forwardRef<HTMLDivElement, IColumn>((props, ref): JSX.Eleme
               'p-4 sm:p-0 sm:pb-4 black:p-4': transparent,
               '-mt-4 p-4': size !== 'lg' && !transparent,
               '-mt-4 p-4 sm:-mt-6 sm:-mx-6 sm:p-6': size === 'lg' && !transparent,
+              'w-full': actionRightPosition,
             })}
             action={action}
           />
-
-            {feature}
-
-          </div>
         )}
         <CardBody className={bodyClassName}>
           {children}

src/features/public-timeline/index.tsx

@@ -64,7 +64,7 @@ const PublicTimeline = () => {
   }, []);
 
   return (
-    <Column className='-mt-3 sm:mt-0' label={intl.formatMessage(messages.title)} transparent={!isMobile} feature={<LanguageDropdown />}>
+    <Column className='-mt-3 sm:mt-0' label={intl.formatMessage(messages.title)} transparent={!isMobile} action={<LanguageDropdown />} actionRightPosition>
       <PinnedHostsPicker />
 
       {showExplanationBox && (