Having trouble with a Bootstrap 5 accordion header that has an icon drop-up menu. The bottom border disappears under the icon and I can't figure out why?
HTML
<div class="w-50 mt-5 mx-auto">
<div class="accordion favorites-folder" id="accordionExample">
<div class="accordion-item">
<div class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Accordion Header
</button>
<div class="btn-group dropup">
<button type="button" class="header-actions" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fa-solid fa-ellipsis-vertical"></i>
</button>
<ul class="dropdown-menu dropdown-menu-end">
<li><button class="dropdown-item" type="button"> Rename</button></li>
<li><button class="dropdown-item" type="button">Delete</button></li>
</ul>
</div>
</div>
<div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
<div class="accordion-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a enim quis justo lacinia ullamcorper quis ac nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer vitae nisi vitae eros iaculis interdum tempor a sapien. Nulla pulvinar, mi quis tincidunt tristique, eros elit venenatis arcu, in dapibus dolor turpis eget nisi.
</div>
</div>
</div>
</div>
</div>
CSS
.favorites-folder {
background-image: none;
.accordion-item {
.accordion-header {
display: flex;
justify-content: space-between;
.accordion-button {
background-color: #fff;
padding: .5rem 1rem;
&:not(.collapsed) {
background-color: #fff;
&::after {
background-image: none;
}
}
&:after {
background-image: none;
}
}
.header-actions {
background: transparent;
border: none;
padding-right: 1rem;
}
}
}
}