Details elements inside of a vertical tab break out of their layout

Problem/Motivation

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.

Steps to reproduce

On a form, create a vertical_tabs element. In one of the child details tabs, add a further detail sub-element.

Proposed resolution

It looks like all details wrappers inherit these styles in tabs.scss if they are inside a vertical tab:

.vertical-tabs {
  &__items {
    .vertical-tabs__item {
      .claro-details__wrapper {
        display: inline-block;
        width: 100%;
      }
    }
  }
}

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.