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

Make tab-nav a bit more responsive #2704

Merged
merged 4 commits into from
Dec 2, 2024
Merged

Conversation

tomalec
Copy link
Member

@tomalec tomalec commented Nov 30, 2024

Changes proposed in this Pull Request:

This PR makes the tab navigation a bit more responsive, my making tabs wrap when the container is too narrow. It also adds the bottom "bar" to the items, sot when the elements wrap, the "bar" is visible under all tabs.

Closes #2473

Replace this with a good description of your changes & reasoning.

Screenshots:

Before

image

After

image

Detailed test instructions:

  1. Go to G4W dashboard /wp-admin/admin.php?page=wc-admin&path=%2Fgoogle%2Fdashboard
  2. Change the viewport size to something narrower
  3. Check that all the tabs are visible
  4. Go to Product feed /wp-admin/admin.php?page=wc-admin&issueType=product&path=%2Fgoogle%2Fproduct-feed
  5. Check that all "Issues to resolve" tabs are visible.

Additional details:

  1. We may consider implementing more dedicated UI for the narrower screens, but I believe it's a good enough quick fix in the meantime.

Changelog entry

Fix - Make the tab navigation tabs wrap when the screen narrows.

@tomalec tomalec requested a review from a team November 30, 2024 19:45
@tomalec tomalec self-assigned this Nov 30, 2024
@github-actions github-actions bot added type: bug The issue is a confirmed bug. changelog: fix Took care of something that wasn't working. labels Nov 30, 2024
Copy link
Member

@eason9487 eason9487 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the fix. LGTM.

The only comment should not need another round of code reviews.

js/src/components/app-tab-nav/index.scss Outdated Show resolved Hide resolved
@tomalec tomalec merged commit 4fab9f0 into develop Dec 2, 2024
4 checks passed
@tomalec tomalec deleted the fix/2473-responsive-menu branch December 2, 2024 21:02
@puntope puntope mentioned this pull request Dec 3, 2024
22 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
changelog: fix Took care of something that wasn't working. type: bug The issue is a confirmed bug.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

GLA Menu is not responsive
2 participants