Improves responsiveness

client/css/buttons.css

@@ -1,14 +1,4 @@
 .buttons {
 	display: flex;
-	align-items: center;
 	justify-content: left;
-	width: 100%;
-}
-
-@media screen and (max-width: 990px) {
-	.buttons {
-		align-items: flex-start;
-		flex-wrap: wrap;
-		gap: 15px;
-	}
 }

client/css/checkbox.css

@@ -1,13 +1,59 @@
-input[type="checkbox"] {
+.checkbox input {
 	height: 0;
 	width: 0;
 	display: none;
 }
 
-input:checked + label {
+.checkbox span {
+	font-size: 0.875rem;
+	color: var(--colour-3);
+	margin-left: 4px;
+}
+
+.checkbox label:after {
+	content: "";
+	position: absolute;
+	top: 50%;
+	transform: translateY(-50%);
+	left: 5px;
+	width: 20px;
+	height: 20px;
+	background: var(--blur-border);
+	border-radius: 90px;
+	transition: 0.33s;
+}
+
+.checkbox input + label:after,
+.checkbox input:checked + label {
+	background: var(--colour-3);
+}
+
+.checkbox input + label,
+.checkbox input:checked + label:after {
 	background: var(--blur-border);
 }
 
-input:checked + label:after {
+.checkbox input:checked + label:after {
 	left: calc(100% - 5px - 20px);
 }
+
+@media screen and (max-width: 990px) {
+	.checkbox span {
+		font-size: 0.75rem;
+	}
+
+	.checkbox label {
+		width: 25px;
+		height: 15px;
+	}
+
+	.checkbox label:after {
+		left: 2px;
+		width: 10px;
+		height: 10px;
+	}
+
+	.checkbox input:checked + label:after {
+		left: calc(100% - 2px - 10px);
+	}
+}

client/css/dropdown.css

@@ -1,3 +1,10 @@
 .dropdown {
-    border: 1px solid var(--conversations);
-}
+	border: 1px solid var(--conversations);
+}
+
+@media screen and (max-width: 990px) {
+	.dropdown {
+		padding: 4px 8px;
+		font-size: 0.75rem;
+	}
+}

client/css/field.css

@@ -1,18 +1,11 @@
 .field {
-	height: fit-content;
 	display: flex;
 	align-items: center;
-	gap: 16px;
-	padding-right: 15px;
-}
-
-.field .about {
-	font-size: 14px;
-	color: var(--colour-3);
+	padding: 4px;
 }
 
 @media screen and (max-width: 990px) {
 	.field {
-		width: fit-content;
+		flex-wrap: nowrap;
 	}
 }

client/css/label.css

@@ -14,16 +14,3 @@ label {
 	overflow: hidden;
 	transition: 0.33s;
 }
-
-label:after {
-	content: "";
-	position: absolute;
-	top: 50%;
-	transform: translateY(-50%);
-	left: 5px;
-	width: 20px;
-	height: 20px;
-	background: var(--colour-3);
-	border-radius: 90px;
-	transition: 0.33s;
-}

client/css/options.css

@@ -0,0 +1,10 @@
+.options-container {
+	display: flex;
+	flex-wrap: wrap;
+}
+
+@media screen and (max-width: 990px) {
+	.options-container {
+		justify-content: space-between;
+	}
+}

client/css/style.css

@@ -14,3 +14,4 @@
 @import "./dropdown.css";
 @import "./field.css";
 @import "./select.css";
+@import "./options.css";