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,23 +99,19 @@ 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}
-              className={clsx({
-                'rounded-t-3xl': !isScrolled && !transparent,
-                'sticky top-12 z-10 bg-white/90 dark:bg-primary-900/90 black:bg-black/90 backdrop-blur lg:top-16': !transparent,
-                '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,
-              })}
-              action={action}
-            />
-
-            {feature}
-
-          </div>
+          <ColumnHeader
+            label={label}
+            backHref={backHref}
+            className={clsx({
+              'rounded-t-3xl': !isScrolled && !transparent,
+              'sticky top-12 z-10 bg-white/90 dark:bg-primary-900/90 black:bg-black/90 backdrop-blur lg:top-16': !transparent,
+              '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}
+          />
         )}
         <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 && (