feat: The radio group is now actually usable on mobile

- The labels aren't cut off anymore
- Instead of trying to fit four buttons next to each other they're now one each line when not enough room is there
This commit is contained in:
Marco Kaiser 2024-11-17 08:15:18 +01:00
parent 81312824e4
commit 6128fbacd6
Signed by: kaiserkiwi
GPG key ID: 664DEC0325FA5EAC

View file

@ -124,9 +124,14 @@ input[type="text"]:focus {
/* Radio Buttons */
.radio-group {
display: flex;
justify-content: space-around;
flex-direction: column;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--spacing-sm);
@media (width > 768px) {
flex-direction: row;
}
}
.radio-group input[type="radio"] {
@ -134,8 +139,7 @@ input[type="text"]:focus {
}
.radio-group label {
width: calc(25% - 10px);
margin: 5px;
flex: 1;
padding: 10px;
text-align: center;
cursor: pointer;