Vertical Style for Tabs block

[Soare-Robert-Daniel]

What problem does this address?

Re-iterate the vertical style implementation of the Tabs block.

The primary issue was dealing with the spacing issues (in the title tab) consistently in both the backend and frontend. The expanding not was equal when padding and font-size have big values, and the word is long.

What is your proposed solution?

• Explore more the usage of CSS Grid
• Same width everywhere. Let the user decide how much space should the tab header occupy.

Ideally, the tab header should nicely auto-expand up to a limit of 30% from the container's width.

[Soare-Robert-Daniel]

@mghenciu I thought we better add a fixed value for the width of tabs in vertical mode. It can be 30% as default. Do you think we need responsive values? Different widths for each device.

[mghenciu]

This depends a lot on the context, where the Tabs are used:

• let's say the container is fullwidth, then 30% can be a lot
• if the container is on mobile, maybe 30% is also a lot
• if the Tab titles are a bit longer, the 30% can be too short.

What I would recommend, is to check the Elementor approach (code wise and UIX wise), as they have a default value which works pretty ok. And if the conclusion is 30%, we can stick to that - and maybe at some point in future, change it to a manual slider.

[AndreeaCristinaRadacina]

@Soare-Robert-Daniel, Seems that we don't have any build or PRs here. Is this still in progress?

I received the doc request, and this is why I was wondering.

[Soare-Robert-Daniel]

@AndreeaCristinaRadacina I think the label was put in the idea that it will need docs when it is done. The issue is not currently started.