Accompanying Files
Observation Details
Country lists within dialog windows ("Ländergruppe XYZ") do not reflow. A multi-column list is not an exception for the reflow rule. The list must reflow to be readable on 320px viewport width.
Remediation Notes
Ensure, using semantic list elements (<ul>) for the country lists. The list can be styled with CSS grid or flexbox to use multiple columns if the screen real-estate allows it and to reflow if not. For a responsive layout, the following CSS grid implementation could be used:
.country-list {
--min-country-width: 200px;
--country-list-gap: 1rem;
display: grid;
grid-gap: var(--country-list-gap);
}
@supports (width: min(var(--min-country-width), 100%)) {
.country-list {
grid-template-columns: repeat(auto-fit, minmax(min(var(--min-country-width), 100%), 1fr));
}
}