>>> [!note] Migrated issue <!-- Drupal.org comment --> <!-- Migrated from issue #3461925. --> Reported by: [jsutta](https://www.drupal.org/user/3615831) Related to !474 >>> <h3 id="summary-problem-motivation">Problem/Motivation</h3> <p>On our node edit pages we make heavy use of horizontal tabs (via the Field Group module) to organize fields. I'm not sure if this affects anyone else, but I wanted to report a bug we've noticed that I'm finally getting around to looking into. It appears that Gin's <code>margin</code> property in <code>tabs.css</code>, specifically <code>.horizontal-tabs .horizontal-tabs-pane &gt; .details-wrapper</code>, overrides Claro's <code>margin</code>, which is what's causing the bug our team noticed.</p> <p>Note: I linked this issue to <a href="https://www.drupal.org/project/gin/issues/3292039">3292039 - Separate out tab theming into tabs.css</a> because that appears to be where the margin was added.</p> <h4 id="summary-steps-reproduce">Steps to reproduce</h4> <ol> <li>Create a content type</li> <li>Create a paragraph type</li> <li>Add several fields to the paragraph</li> <li>On the paragraph's form display settings, organize the fields into tabs</li> <li>Add a paragraph field to the content type. Add the paragraph type you created in step 2 to its allowed paragraph types.</li> <li>Create a new node of the content type you created, and add a paragraph to the paragraph field you created.</li> <li>The tabs should look approximately like the attached screenshot.</li> </ol> <p><img src="https://www.drupal.org/files/issues/2024-07-16/vp8BUmeB10.png" alt="Screenshot showing a tab's body overlapping with the tab list"></p> <h3 id="summary-proposed-resolution">Proposed resolution</h3> <p>I'll open a merge request to remove the <code>margin</code> property from the tabs CSS and SCSS files.</p> <h3 id="summary-remaining-tasks">Remaining tasks</h3> <p>Commit</p> <h3 id="summary-ui-changes">User interface changes</h3> <p>Before - </p> <p><img src="https://www.drupal.org/files/issues/2024-07-18/before_3.png" alt="before"></p> <p>After - </p> <p><img src="https://www.drupal.org/files/issues/2024-07-18/after_2.png" alt="after-patch"></p> <h3 id="summary-introduced-terminology">Introduced terminology</h3> <p>NA</p> <h3 id="summary-api-changes">API changes</h3> <p>NA</p> <h3 id="summary-data-model-changes">Data model changes</h3> <p>NA</p> <h3 id="summary-release-notes">Release notes snippet</h3> <p>NA</p> > Related issue: [Issue #3292039](https://www.drupal.org/node/3292039)