fix map dialog last item sizing

This commit is contained in:
Vinzenz Schroeter 2024-05-07 16:19:09 +02:00
parent 21a1df47b8
commit 3927f4955d
2 changed files with 12 additions and 11 deletions

View file

@ -1,15 +1,8 @@
.MapChooser-DropDown {
border: solid var(--border-size-thin);
padding: var(--padding-normal);
background: var(--color-background);
border-color: var(--color-primary);
color: var(--color-primary);
}
.MapChooser-Row { .MapChooser-Row {
flex-wrap: wrap; display: grid;
width: 100%;
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
} }
.MapChooser-Preview { .MapChooser-Preview {
@ -21,3 +14,7 @@
.MapChooser-Preview-Highlight { .MapChooser-Preview-Highlight {
border-color: var(--color-secondary); border-color: var(--color-secondary);
} }
.MapChooser-Dialog {
width: 100%;
}

View file

@ -58,7 +58,11 @@ function MapChooserDialog({mapNames, onClose, onConfirm}: {
readonly onClose: () => void; readonly onClose: () => void;
}) { }) {
const [chosenMap, setChosenMap] = useState<string>(); const [chosenMap, setChosenMap] = useState<string>();
return <Dialog title="Choose a map" onClose={onClose}> return <Dialog
className='MapChooser-Dialog'
title="Choose a map"
onClose={onClose}
>
<Row className="MapChooser-Row overflow-scroll"> <Row className="MapChooser-Row overflow-scroll">
{mapNames.map(name => <MapPreview {mapNames.map(name => <MapPreview
key={name} key={name}