From 6128fbacd66bec4373a8c4ee63dc1f9a535ef453 Mon Sep 17 00:00:00 2001
From: Marco Kaiser <kaiserkiwi@icloud.com>
Date: Sun, 17 Nov 2024 08:15:18 +0100
Subject: [PATCH] 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

---
 css/style.css | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/css/style.css b/css/style.css
index 1723f3f..6286641 100644
--- a/css/style.css
+++ b/css/style.css
@@ -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;