CSS issue with horizontal tabs nested inside vertical tabs

[skurvish]

Steps to reproduce the issue

I have a vertical tabset and on each tab of this vertical tabset I have a horizontal tabset. The CSS rules appear to be applied differently between the site view and the admin view. On the admin view parts of the vertical CSS is being applied to the horizontal tabs.

Expected result

The tabs should be rendered the same in both views.

Actual result

They are not. The styling of the horizontal tabs tabs do not match the vertical ones. Furthermore, on the site view there is a gap between the vertical tabset and the tab data that it points to.

System information (as much as possible)

Basically a vanilla version of Joomla 4.1.5. I am working on modifying a component from J3 to J4.

Additional comments

I am attaching a number of screen images of the resulting rendering. Below is the actual markup I am using in both cases:

<?php

use Joomla\CMS\HTML\HTMLHelper;
use Joomla\CMS\Language\Text;

//HTMLHelper::_('bootstrap.tab'); // Does not appear to be needed.

echo HTMLHelper::_('uitab.startTabSet', 'vertical', ['active'=>'details', 'orientation'=>'vertical']);
    echo HTMLHelper::_('uitab.addTab', 'vertical', 'vertical1', 'Vertical 1');
        echo HTMLHelper::_('uitab.startTabSet', 'v1horizontal', ['active'=>'v1h1', 'orientation'=>'horizontal']);
            echo HTMLHelper::_('uitab.addTab', 'v1horizontal', 'v1h1', 'V1 Horizontal 1');
                echo "Hello from V1 Horizontal 1";
            echo HTMLHelper::_('uitab.endTab');
            echo HTMLHelper::_('uitab.addTab', 'v1horizontal', 'v1h2', 'V1 Horizontal 2');
                echo "Hello from V1 Horizontal 2";
            echo HTMLHelper::_('uitab.endTab');
            echo HTMLHelper::_('uitab.addTab', 'v1horizontal', 'v1h3', 'V1 Horizontal 3');
                echo "Hello from V1 Horizontal 3";
            echo HTMLHelper::_('uitab.endTab');
        echo HTMLHelper::_('uitab.endTabSet');
    echo HTMLHelper::_('uitab.endTab');
    echo HTMLHelper::_('uitab.addTab', 'vertical', 'vertical22', 'Vertical 2');
        echo HTMLHelper::_('uitab.startTabSet', 'v2horizontal', ['active'=>'v2h1', 'orientation'=>'horizontal']);
            echo HTMLHelper::_('uitab.addTab', 'v2horizontal', 'v2h1', 'V2 Horizontal 1');
                echo "Hello from V2 Horizontal 1";
            echo HTMLHelper::_('uitab.endTab');
            echo HTMLHelper::_('uitab.addTab', 'v2horizontal', 'v2h2', 'V2 Horizontal 2');
                echo "Hello from V2 Horizontal 2";
            echo HTMLHelper::_('uitab.endTab');
            echo HTMLHelper::_('uitab.addTab', 'v2horizontal', 'v2h3', 'V2 Horizontal 3');
                echo "Hello from V2 Horizontal 3";
            echo HTMLHelper::_('uitab.endTab');
        echo HTMLHelper::_('uitab.endTabSet');
    echo HTMLHelper::_('uitab.endTab');
echo HTMLHelper::_('uitab.endTabSet');

Site View.png : Note that the tab for V1 Horizontal 1 is styled correctly. Also note the gap between the vertical tabset and the tab data to the right of it.

Site View Styles.png : Note the styles

Admin View.png : Note that the tab for V1 Horizontal 1 is styled incorrectly. Also note there is no gap as there was on the Site View.

Admin View Styles.png : Note the styles. You will see that on the button of the selected Horizontal tab on the third style down it is showing orientation=vertical. This can't be right.

[brianteeman]

the css of the site and admin templates is not identical

[skurvish]

When I look at the styles being applied the only file that is applying the CSS is joomla-tab.css and it is the file site and admin.

---

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

[skurvish]

But yes, the templates are different but I don't see how the template can affect the orientation=vertical part being applied. But I am no CSS expert by any stretch.

---

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

[skurvish]

I note that com_config has a similar structure to what I am attempting to accomplish. The lefthand navigation bar is created manually rather than through a vertical tabset. Might that be because the combination of vertical and horizontal was not working as I am seeing, or that they wanted to do something beyond the capabilities of the HTMLHelper uiTab system?

---

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

[chmst]

What you call vertical tab set (the left sidbar) in the backend is an accessible dropdown menu, not a tabset. This was quite another concept.