Replace the four stacked chip-button groups (Channel, Kind, Status, Site) on the Audit Log filter bar with a reusable MultiSelectDropdown component, so the bar collapses from four full-width chip blocks to four inline dropdowns sharing one wrapped filter row. Bootstrap dropdown + checkbox menu (data-bs-auto-close =outside); no third-party UI libraries.
33 lines
815 B
CSS
33 lines
815 B
CSS
/* Compact multi-select dropdown. Tuned to sit inline with form-select-sm /
|
|
form-control-sm controls in a filter row. */
|
|
|
|
.msd-toggle {
|
|
min-width: 9rem;
|
|
max-width: 15rem;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Keep a long option list from running off-screen — scroll within the menu. */
|
|
.msd-menu {
|
|
max-height: 16rem;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
/* The whole row is a <label> so a click anywhere toggles the checkbox; the
|
|
menu stays open thanks to data-bs-auto-close="outside". */
|
|
.msd-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Neutralise the default form-check-input top margin so the box lines up with
|
|
the option text inside the dropdown-item. */
|
|
.msd-check {
|
|
flex: 0 0 auto;
|
|
margin: 0;
|
|
}
|