Fix tabs not wrapping and trigger horizontal scrolling

[Ruud68]

Pull Request for Issue #30667

Summary of Changes

Add flex wrap to enable wrap on tabs

Testing Instructions

• apply pr,
• npm run build:css

Actual result BEFORE applying this Pull Request

see issue #30667

Expected result AFTER applying this Pull Request

see issue #30667

Documentation Changes Required

nope

[sandewt]

I have tested this item ✅ successfully on 7778840

Joomla! 4.0.0-beta5-dev Development [ Mañana ] 15-September-2020 19:15 GMT

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/30675.}

[Ruud68]

Thanks @sandewt for testing!

[richard67]

@chmst @wilsonge Could you test this PR with the laptops you have used for reproducing issue #28799 ? To me it seems other issues than the tabs, e.g. the width of the toolbar and header area either have been solved elsewhere meanwhile, or they are magically solved with this PR, too, or my 2 screens are not suitable to reproduce the other issues.

[richard67]

I have tested this item ✅ successfully on 7778840

Not sure if it is the best solution, but it is a solution which works, and for me it's ok.

Hoping for more opinions.

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/30675.}

[richard67]

RTC

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/30675.}

[richard67]

2 good tests, so RTC.

But I'd still like to know other opinions and if it has fixed issue #28799 completely or not.

[Ruud68]

@richard67 thanks for testing and RTC :)

This is the default way bootstrap 4 implements tabs, see here: https://getbootstrap.com/docs/4.5/components/navs/#tabs

[chmst]

In any case it is better than before and resolves the issue with horizontal scrolling. So RTC is good for me.

[wilsonge]

I mean it's ugly as hell but it wraps. Which is more than it does now

[wilsonge]

Thanks!