Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Show "Clear all" to the left of feature filters to prevent layout shift #5143

Merged
merged 1 commit into from
Feb 20, 2025

Conversation

rolodato
Copy link
Member

When selecting the first filter (or removing the last filter) on a list of features, "Clear all" appears/disappears to the right of the filter dropdowns, which causes layout shift. This is especially notable if a dropdown is open:

clear.all.mov

By moving "Clear all" to the left of the filters, we prevent most of the layout shift. There is still some layout shift when the number of selected filters (1) appears, but is much less noticeable and does not affect open dropdowns:

clear.all.new.mov

@rolodato rolodato requested a review from a team as a code owner February 20, 2025 14:03
@rolodato rolodato requested review from tiagoapolo and removed request for a team February 20, 2025 14:03
Copy link

vercel bot commented Feb 20, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
flagsmith-frontend-preview ✅ Ready (Inspect) Visit Preview 💬 Add feedback Feb 20, 2025 2:03pm
flagsmith-frontend-staging ✅ Ready (Inspect) Visit Preview 💬 Add feedback Feb 20, 2025 2:03pm
1 Skipped Deployment
Name Status Preview Comments Updated (UTC)
docs ⬜️ Ignored (Inspect) Feb 20, 2025 2:03pm

@rolodato rolodato added the front-end Issue related to the React Front End Dashboard label Feb 20, 2025
Copy link
Contributor

github-actions bot commented Feb 20, 2025

Docker builds report

Image Build Status Security report
ghcr.io/flagsmith/flagsmith-api-test:pr-5143 Finished ✅ Skipped
ghcr.io/flagsmith/flagsmith-e2e:pr-5143 Finished ✅ Skipped
ghcr.io/flagsmith/flagsmith-api:pr-5143 Finished ✅ Results
ghcr.io/flagsmith/flagsmith-private-cloud:pr-5143 Finished ✅ Results
ghcr.io/flagsmith/flagsmith:pr-5143 Finished ✅ Results
ghcr.io/flagsmith/flagsmith-frontend:pr-5143 Finished ✅ Results

@github-actions github-actions bot added the fix label Feb 20, 2025
Copy link
Contributor

github-actions bot commented Feb 20, 2025

Uffizzi Preview deployment-61153 was deleted.

@rolodato rolodato merged commit cff5c96 into main Feb 20, 2025
34 checks passed
@rolodato rolodato deleted the style/clear-filters-on-left branch February 20, 2025 14:51
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
fix front-end Issue related to the React Front End Dashboard
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants