Skip to content

fix(feed): anchor filter button to the right side, match Trending pattern#14334

Merged
dylanjeffers merged 1 commit into
mainfrom
fix/feed-filter-button-positioning
May 15, 2026
Merged

fix(feed): anchor filter button to the right side, match Trending pattern#14334
dylanjeffers merged 1 commit into
mainfrom
fix/feed-filter-button-positioning

Conversation

@dylanjeffers
Copy link
Copy Markdown
Contributor

Summary

The feed filter button (the dropdown next to the Chronological tab) was sitting inline next to the feed tabs in the Header's rightDecorator slot, instead of being anchored to the right edge of the header like Trending does.

Move both the FeedTabs and FeedFilters from rightDecorator into the Header bottomBar slot, wrapped in <Flex w='100%' justifyContent='space-between'> — this is the exact pattern TrendingPageContent uses (tabs on the left, filter buttons on the right). The mobile-web header gets the equivalent change: justifyContent flips from center to space-between with w='100%', so the filter is pushed to the right edge.

When the For You tab is active there is no filter button — only the tabs render — which matches existing behavior.

This supersedes #14315, which introduced the filter button but kept it clumped next to the tabs.

Files changed

Test plan

Note: the dev server was not available in this worktree, so the change has not been visually verified in a browser yet. The diff is a structural prop change (slot + flex alignment) — no logic, no new components.

  • Desktop: open feed page, Chronological tab → confirm the filter button sits at the right edge of the header (not next to the tabs), tabs are on the left, separated by full-width space-between
  • Desktop: switch to For You → confirm filter button is hidden, only tabs render
  • Desktop: open the filter dropdown → confirm All Posts / Original Posts / Reposts options work and filter the lineup
  • Mobile-web: repeat the above checks — filter button should sit at the right edge of the header

🤖 Generated with Claude Code

…tern

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>
@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented May 15, 2026

⚠️ No Changeset found

Latest commit: ffd82ea

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@github-actions
Copy link
Copy Markdown
Contributor

🌐 Web preview ready

Preview URL: https://audius-web-preview-pr-14334.audius.workers.dev

Unique preview for this PR (deployed from this branch).
Workflow run

@dylanjeffers dylanjeffers merged commit b5817fc into main May 15, 2026
14 checks passed
@dylanjeffers dylanjeffers deleted the fix/feed-filter-button-positioning branch May 15, 2026 20:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant