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.