Skip to content

Conversation

@n0ctua
Copy link
Contributor

@n0ctua n0ctua commented Aug 14, 2025

  • Replaces wrapping .nav.nav-tabs on small screens with a compact <select> placed above the tab bar
  • Dynamically toggles between select and tab bar: when tabs overflow/wrap → show select, hide tabs; otherwise → hide select, show tabs
  • with bidirectional sync

Goal

  • Prevents broken tab layouts on mobile
  • Robust and maintainable, no template/markup changes required

- Replace overflowing/wrapped tabs with compact select on small screens
- Bidirectional sync between select and Bootstrap tab
@n0ctua n0ctua requested review from krmax44 and stefanw August 14, 2025 09:59
})

// Reevaluate on content size changes
if ('ResizeObserver' in window) {
Copy link
Member

Choose a reason for hiding this comment

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

We only target browsers with support for ResizeObserver, so we can omit timer-based workarounds.

document.querySelectorAll<HTMLElement>('ul.nav.nav-tabs').forEach(initSelectForNavTabs)
}

if (typeof document !== 'undefined') {
Copy link
Member

Choose a reason for hiding this comment

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

When would document be undefined? Since we include scripts at the end of body, just calling initAll should be sufficient, as the DOM content has already been loaded.

@krmax44
Copy link
Member

krmax44 commented Aug 14, 2025

Maybe it makes sense to keep the tab look-and-feel, so that it can be identified as such:

image image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants