From ffd82eaf9ae3f61907b5fe6c01cb88eb874a9460 Mon Sep 17 00:00:00 2001
From: Dylan Audius <dylan@audius.co>
Date: Fri, 15 May 2026 12:59:44 -0700
Subject: [PATCH] fix(feed): anchor filter button to the right side, match
 Trending pattern
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Move the feed tabs and chronological filter from the inline `rightDecorator`
slot into the Header `bottomBar` slot with `justifyContent='space-between'`,
so the filter button is anchored to the right edge of the header — same UI
pattern Trending uses. Apply the equivalent change to the mobile-web header.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../feed-page/components/desktop/FeedPageContent.tsx   | 10 ++++++++--
 .../feed-page/components/mobile/FeedPageContent.tsx    |  7 ++++++-
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/packages/web/src/pages/feed-page/components/desktop/FeedPageContent.tsx b/packages/web/src/pages/feed-page/components/desktop/FeedPageContent.tsx
index a0001a6c416..6eefea3577d 100644
--- a/packages/web/src/pages/feed-page/components/desktop/FeedPageContent.tsx
+++ b/packages/web/src/pages/feed-page/components/desktop/FeedPageContent.tsx
@@ -113,8 +113,14 @@ const FeedPageContent = ({ containerRef }: FeedPageContentProps) => {
       titleRowRef={titleRowRef}
       icon={IconFeed}
       primary={messages.feedHeaderTitle}
-      rightDecorator={
-        <Flex gap='s' alignItems='center'>
+      bottomBar={
+        <Flex
+          w='100%'
+          alignItems='center'
+          justifyContent='space-between'
+          gap='m'
+          pb='l'
+        >
           <FeedTabs currentTab={feedTab} onSelectTab={onSelectTab} />
           {isForYou ? null : (
             <FeedFilters
diff --git a/packages/web/src/pages/feed-page/components/mobile/FeedPageContent.tsx b/packages/web/src/pages/feed-page/components/mobile/FeedPageContent.tsx
index ffb058506c0..33d4ed578c5 100644
--- a/packages/web/src/pages/feed-page/components/mobile/FeedPageContent.tsx
+++ b/packages/web/src/pages/feed-page/components/mobile/FeedPageContent.tsx
@@ -113,7 +113,12 @@ const FeedPageMobileContent = ({
   useEffect(() => {
     setHeader(
       <Header title={messages.title} className={styles.header}>
-        <Flex gap='s' alignItems='center' justifyContent='center'>
+        <Flex
+          w='100%'
+          gap='s'
+          alignItems='center'
+          justifyContent='space-between'
+        >
           <FeedTabs currentTab={feedTab} onSelectTab={handleSelectTab} />
           {isForYou ? null : (
             <FeedFilters