Hexo-theme-next: Tabs tag overflow bug

[online]

Hi to all.

To reproduce the bug you need to open the page "Getting Started" on mobile device. Here is my screenshot:

[1v9]

Related to screen width? I'm not sure.

[stevenjoezhang]

Reproduced on my iPhone ...

But it looks fine in Chrome's simulator... don't know why

[1v9]

@stevenjoezhang reproduced in simulator responsive mode, drag screen...

[stevenjoezhang]

Ah... need to update this file: https://github.com/theme-next/hexo-theme-next/blob/master/source/css/_common/components/tags/tabs.styl
to make tabs more responsive

[ivan-nginx]

https://github.com/theme-next/hexo-theme-next/blob/20abf291fb24c92ed18f3393ea7b79ae53fdf7af/source/css/_common/components/tags/tabs.styl#L13-L17

Flex:

Block:

And other borders & marigns in this file...

---

But I think about that and it seems will be better somehow to determine tabs width & counts and if width of this values longer then viewport width → set tabs as block; if not → stay as is, in flex style.

[stevenjoezhang]

How about tabs like this:

Using float: left

[jiangtj]

Or vertical? 😹
Referenced：https://getbootstrap.com/docs/4.3/components/navs/#vertical
Example： https://www.dnocm.com/more/tools/
Code：https://raw.githubusercontent.com/JiangTJ/blog/master/source/more/tools/index.md

Just a joke. Ignore it. 😉

[ivan-nginx]

How about tabs like this:

Using float: left

Seems good too. Need just to fix this bug.

[stevenjoezhang]

See also https://github.com/next-theme/hexo-theme-next/commit/eb4388f8b432f7e13b7db035555a5c5f2e3c4744