Details elements inside of a vertical tab break out of their layout
>>> [!note] Migrated issue
<!-- Drupal.org comment -->
<!-- Migrated from issue #3360757. -->
Reported by: [bvoynick](https://www.drupal.org/user/3308129)
Related to !256
>>>
<h3 id="summary-problem-motivation">Problem/Motivation</h3>
<p>In details elements that are inside of a vertical tab, the content wrapper (.details-wrapper) may overflow the detail. See attached screenshot, where the "Donate" details right-hand border is mostly invisible because the content is laid over it.</p>
<h4 id="summary-steps-reproduce">Steps to reproduce</h4>
<p>On a form, create a vertical_tabs element. In one of the child details tabs, add a further detail sub-element.</p>
<h3 id="summary-proposed-resolution">Proposed resolution</h3>
<p>It looks like all details wrappers inherit these styles in tabs.scss if they are inside a vertical tab:</p>
<pre>.vertical-tabs {<br> &__items {<br> .vertical-tabs__item {<br> .claro-details__wrapper {<br> display: inline-block;<br> width: 100%;<br> }<br> }<br> }<br>}</pre><p>Adding a > direct descendent selector before .claro-details__wrapper should limit this block to just the intended target, the details element that is acting as tab content.</p>
issue