Long tabs look miserable on small screens

[ddnexus]

Tab should be on the same line, but should not overflow outside their own containers. We need something like automatic horizontal sliding/scrolling.

[benkoshy]

Live preview of overflow issue (please use a mobile view):

[woducku]

@geoffreymcgill is there any ETA for this to be fixed?

[geoffreymcgill]

We might have to change the rendering of the Tabs so that on narrow screens they automatically change to a stacked Panel component. Basically an Accordion component where opening on panel of the accordion closes any others.

Even just revising now to a stacked Panel component instead of a Tab component might be an option for you:

==- `pagy*_nav_js`

![bootstrap_nav_js](/docs/assets/images/bootstrap_nav_js.png)

<details>
  <summary>
  Helpers for other CSS frameworks:
  </summary>

- `pagy_nav_js`
- `pagy_bootstrap_nav_js`
- `pagy_bulma_nav_js`
- `pagy_foundation_nav_js`
- `pagy_materialize_nav_js`
- `pagy_semantic_nav_js`

</details>

<br>

See [Pagy Navs](javascript/navs.md)

==- `pagy*_combo_nav_js`

![bootstrap_combo_nav_js](/docs/assets/images/bootstrap_combo_nav_js.png)

* Navigation and pagination info combined.

<details>
  <summary>
    Helpers for other CSS frameworks:
  </summary>

- `pagy_combo_nav_js`
- `pagy_bootstrap_combo_nav_js`
- `pagy_bulma_combo_nav_js`
- `pagy_foundation_combo_nav_js`
- `pagy_materialize_combo_nav_js`
- `pagy_semantic_combo_nav_js`

</details>

<br>

See [Pagy Combo Navs](javascript/combo-navs.md)

==- `pagy_items_selector_js`

![pagy_items_selector_js](/docs/assets/images/items_selector_js.png)

* Choose items numbers, per page.
* This helper is only available in one style.

See: [Items](../extras/items.md)

===

[benkoshy]

@geoffreymcgill Thx for the suggested patch.

PLMK your timeline? (I would much prefer upgrading the retype version, rather than changing all such instances in the documentation with the above patch). If it's relatively soon, i'll wait, but if it's gonna be late, then i might have to resort to making those changes.

(btw i cannot be more effusive in my praise of your efforts)

[geoffreymcgill]

PLMK your timeline?

We're kinda buried under a pile of feature requests and things to deal with atm, but I am going to try and take a look at this issue next week.

I should be able to come up with a regex search-and-replace that would find existing Tab components within your project to convert to stacked Panel components as needed. Another search-and-replace should be able to convert those stacked Panels back to a Tab components in one shot. At least this would be a simple way to convert all instances in your project quickly and easily without manually editing content files, then convert back quickly when the automatic handling within Retype is released.

(btw i cannot be more effusive in my praise of your efforts)

Awesome, thank you! 😄

Oh how I wish we had four more developers/designers... and the money to pay them. 🤑 🤑