Skip to content

Add 1rem margin bottom to summary in open details

Chad Lavimoniere requested to merge cl-20240320-details-summary-margin-bottom into master

What does this MR do and why?

When a <details> element is open, add a 1rem bottom margin to the nested <summary> element to separate it from the content.

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Screenshots or screen recordings

Before After
Screenshot_2024-03-20_at_17.58.17 Screenshot_2024-03-20_at_17.58.48

How to set up and validate locally

  1. Check out this branch locally
  2. Create an issue
  3. Add a <details> to the issue description and some content in the details after the summary.
  4. Save the issue
  5. While viewing the issue, expand the details
    1. You will see a 1rem margin between the summary and the start of the other content of the details
  6. Edit the issue description to add an h1 header as the first child of the details after the summary
  7. Save the issue and view it. Expand the details again.
    1. You will see that the 1rem bottom margin on the summary element collapses with the top margin on the h1 element. The spacing between the summary and the h1 element will be identical to the spacing as it already is on prod today.

Realted to #425467 (closed)

Edited by Chad Lavimoniere

Merge request reports