Accordion titles can overlap arrows

[joshuasosa]

Problem/Motivation

Accordion titles can overlap the accordion arrows if there's too much text.

Describe the bug

Sometimes the title of an accordion goes long or wraps on mobile. When it does, it can potentially overlap with the accordion arrows.

Proposed resolution

Changing to something like this fixes it:

.accordion .card-header .btn {
  padding: .75rem 2.25rem .75rem 1.25rem;
}

.accordion .card-header .btn::after {
  right: 10px;
}

@media (min-width: 576px) {
  .accordion .card-header .btn {
    padding-right: 3rem;
  }

  .accordion .card-header .btn::after {
    right: 20px;
  }
}

Alternatively, could backport the way Bootstrap 5 does it with flex.

Expected behavior

Accordion titles should never overlap accordion arrows.

Screenshots

Example

Example on it.arizona.edu

Example on lpl.arizona.edu

Example solution on lpl.arizona.edu

[mmunro-ltrr]

This may be an issue where there are different fixes for the 2.x & main branches. Investigating...

[mmunro-ltrr]

Pull request #1198 closed the original issue. Moving to a Flexbox approach remains an open issue, as #1207