USE-591: Always show active tab, even if it would be hidden in More menu#400
Conversation
![qltysh[bot]](https://avatars.githubusercontent.com/in/890766?s=60&v=4){kind=small}
Coverage Report for CI Build 26964677078Warning Build has drifted: This PR's base is out of sync with its target branch, so coverage data may include unrelated changes. Coverage remained the same at 98.319%Details
Uncovered ChangesNo uncovered changes found. Coverage RegressionsNo coverage regressions found. Coverage Stats
💛 - Coveralls |
There was a problem hiding this comment.
Pull request overview
This PR updates the responsive “Source tabs” navigation so that when the active tab would otherwise be hidden inside the “More” overflow menu, it is moved into the visible primary tab list (pinned to position 2, right after “All”).
Changes:
- Refactors the tabs script into an
initTabs()initializer with guards for missing tabs and repeat initialization. - Adds logic to detect when the active tab is hidden and reorder primary/secondary tab lists so the active tab appears in position 2.
- Hooks initialization to
turbo:loadand an immediate fallback call.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| // Store original DOM order by index for each li | ||
| Array.from(primary.querySelectorAll('li:not(.-more)')).forEach((li, index) => { | ||
| li.dataset.originalIndex = index | ||
| }) | ||
| Array.from(secondary.querySelectorAll('li:not(.-more)')).forEach((li, index) => { | ||
| li.dataset.originalIndex = index | ||
| }) |
There was a problem hiding this comment.
I was seeing a minor visual bug that become way more common with this, so avoiding for now.
JPrevost
left a comment
JPrevost
left a comment
There was a problem hiding this comment.
This works. It's kinda wonky, but definitely addresses the problem as I understood it.
Developer
Because we hide tabs that don't fit the screen width, we noticed that if a tab that's hidden is the active tab it's hard to know that visually.
This work makes sure the active tab is pinned into position 2 (right after the "All" option).
Accessibility
New ENV
Approval beyond code review
Additional context needed to review
E.g., if the PR includes updated dependencies and/or data
migration, or how to confirm the feature is working.
Code Reviewer
Code
added technical debt.
Documentation
(not just this pull request message).
Testing