>>> [!note] Migrated issue <!-- Drupal.org comment --> <!-- Migrated from issue #3587095. --> Reported by: [seutje](https://www.drupal.org/user/264148) Related to !784 !777 >>> <h3 id="summary-problem-motivation">Problem/Motivation</h3> <p>The wrapper for tabs isn't tall enough to fit its content, causing the tabs to overlap with the rest of the page.</p> <h4 id="summary-steps-reproduce">Steps to reproduce</h4> <p>Put the "Tabs" and the "Main page content" blocks in the same region for the Gin Theme.<br> Go to a page that is rendered with Gin and has horizontal tabs and run the following in the console:<br> <code>document.querySelectorAll('.is-horizontal').forEach(function(el) { console.log('Wrapper height: ', el.offsetHeight); console.log('Tabs height: ', el.querySelector('.tabs').offsetHeight); });</code></p> <p>On a default install, it logs 29 for the wrapper height and 61 for the tabs height.</p> <h3 id="summary-proposed-resolution">Proposed resolution</h3> <p>Remove this from the tabs:<br> <code>margin-block-end: calc(var(--gin-spacing-xl) * -1);</code></p> <h3 id="summary-remaining-tasks">Remaining tasks</h3> <p>Review/clarify why that rule exists.</p> <h3 id="summary-ui-changes">User interface changes</h3> <p>Fixes tabs overlapping with content below them.</p> <h3 id="summary-api-changes">API changes</h3> <p>n/a</p> <h3 id="summary-data-model-changes">Data model changes</h3> <p>n/a</p>