Fixed poor styling for selects and checkboxes on mobile

app/assets/stylesheets/_application.scss

@@ -642,13 +642,11 @@ input {
 	display: inline-block;
 
 	label {
-		float: left;
 		min-width: 7.5em;
-	}
 
-	&.vertical {
+		@include after {
-		label {
+			top: -0.15em;
-			float: none;
+			left: 0.05em;
 		}
 	}
 }
@@ -800,8 +798,6 @@ fieldset {
 }
 
 .fieldgroup {
-	@include _-(display, flex);
-	@include _-(display, inline-flex);
 	@include _(align-items, flex-end);
 	@include _(flex-wrap, wrap);
 	margin: 0 0 3em 1em;
@@ -3155,6 +3151,7 @@ html[data-lingua-franca-example="html"] {
 
 	select {
 		display: block;
+		width: 100%;
 		height: 1.75em;
 		font-family: inherit;
 		font-size: 1.5em;
@@ -3210,6 +3207,7 @@ html[data-lingua-franca-example="html"] {
 
 		select {
 			padding-right: 2.25em;
+			-webkit-appearance: none;
 			@include _(appearance, none);
 		}
 
@@ -3688,6 +3686,34 @@ html[data-ontop] {
 		input:first-child + label {
 			border: 0.1em solid;
 		}
+
+		&.inline {			
+			label {
+				float: left;
+
+				@include after {
+					top: -0.025em;
+					left: 0.175em;
+				}
+			}
+
+			&.vertical {
+				label {
+					float: none;
+				}
+			}
+		}
+	}
+
+	.fieldgroup {
+		@include _-(display, flex);
+		@include _-(display, inline-flex);
+	}
+
+	.select-field {
+		select {
+			width: auto;
+		}
 	}
 
 	.admin-blocks {