Accordion titles can overlap arrows

joshuasosa commented 5 months ago

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.