Problem/Motivation

Olivero is very promising but "Layout Builder Tabs Section" module tabs are not responsive.

Steps to reproduce

When reducing the width of the browser, the tabs simply disappear.
When tested with other themes (like Bartik), the tabs behave responsive.

Proposed resolution

That could seem like a minor issue but, the "Layout Builder Tabs Section" module is the only way (that works) to display blocks in tabs within the layout builder.

Remaining tasks

User interface changes

API changes

Data model changes

Release notes snippet

Comments

psymax created an issue. See original summary.

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Status: Active » Postponed (maintainer needs more info)

Is the "Layout Builder Tabs Section" module required to reproduce this?

Can you include screenshots?

Thanks for reporting the bug :)

psymax’s picture

psymax commented

Hello, mherchel...
Thank you very much for your answer.
Yes, the "Layout Builder Tabs Section" module is required to reproduce this.
In fact, the whole process is documented in this thread.
This is a conversation with mandclu, the creator of that module, who has been kind enough to try and fix the problem from the module side... which has worked to a large extent.
Many thanks again!

aaron.ferris’s picture

aaron.ferris commented

Feels like the logical place for this css would be in https://www.drupal.org/project/layout_builder_tabs given the markup/template is driven from that module. Seems like a patch has been provided over there, does it fix the problem? Another option would be to move away from using tabs__tab as a class in the tabs.html.twig template.

I can see that the tabs are hidden by Olivero's CSS under a certain breakpoint. (Source /css/components/tabs.css)

.tabs__tab {
    display: none;
    margin: 0;
    margin-bottom: -1px;
}

@media (min-width: 43.75rem) {
  .tabs__tab {
     display: flex;
     margin: 0;
     margin-bottom: -1px;
  }
}
gauravvvv’s picture

gauravvvv commented

This is duplicate of https://www.drupal.org/project/layout_builder_tabs/issues/3208330

gauravvvv’s picture

gauravvvv commented
Status: Postponed (maintainer needs more info) » Closed (duplicate)
psymax’s picture

psymax commented

Thank you very much, Aaron. Will test that!

aaron.ferris’s picture

aaron.ferris commented

Welcome @psymax.