[wp-trac] [WordPress Trac] #62335: CSS Error in Customizer in v6.7-RC2

[WordPress Trac]

#62335: CSS Error in Customizer in v6.7-RC2
---------------------------+-----------------------------
 Reporter:  domainsupport  |      Owner:  (none)
     Type:  defect (bug)   |     Status:  new
 Priority:  normal         |  Milestone:  Awaiting Review
Component:  Customize      |    Version:  trunk
 Severity:  normal         |   Keywords:  needs-patch
  Focuses:  css            |
---------------------------+-----------------------------
 We've noticed that in v6.7 the HTML and CSS for the Customizer has changed
 whereby the `<h3>` '.accordion-section-title' elements now contains a
 `<button>` element and no longer contains the `<span>` `.screen-reader-
 text`.

 I'm sure there's a reason for this change and that's not the issue in
 itself.

 The issue is the CSS from `load-styles.php` that now sets the width to
 100% ...

 {{{
 .accordion-section-title button.accordion-trigger {
 width: 100%;
 padding: 10px 10px 11px 14px;
 }
 }}}

 This makes the new <button> element wider than 100% and should instead be
 set to either account for the padding with something like `width:
 calc(100% - 24px)` or `box-sizing: border-box;` should be set.

 Without this fix the text can spill off the edge of the UI and can't be
 seen.

 Furthermore, when the text is long enough it is shown behind the arrow at
 the end so actually, the width value should be even smaller such as
 `width: calc(100% - 40px)`.

 Oliver

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/62335>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform