Improved mobile scaling of preferences and account settings.

components/user/account.vue

@@ -79,7 +79,7 @@ async function verifyEmail() {
 		class="profile-section"
 		@submit.prevent="updateAccount"
 	>
-		<label class="setting">
+		<div class="setting">
 			<span class="setting-label">
 				<strong class="setting-title">E-mail address</strong>
 				<span class="setting-description">Primarily used for alert notifications and password recovery</span>
@@ -132,9 +132,9 @@ async function verifyEmail() {
 					class="input"
 				>
 			</span>
-		</label>
+		</div>
 
-		<label class="setting">
+		<div class="setting">
 			<span class="setting-label">
 				<strong class="setting-title">New password</strong>
 				<span class="setting-description">Change the password you use for signing in</span>
@@ -148,9 +148,9 @@ async function verifyEmail() {
 					@input="(password) => credentials.password = password"
 				/>
 			</span>
-		</label>
+		</div>
 
-		<label class="setting">
+		<div class="setting">
 			<span class="setting-label">
 				<strong class="setting-title">Current password</strong>
 				<span class="setting-description">Enter your current password to save your changes</span>
@@ -163,7 +163,7 @@ async function verifyEmail() {
 					@input="(password) => currentPassword = password"
 				/>
 			</span>
-		</label>
+		</div>
 
 		<div class="settings-actions">
 			<Ellipsis v-if="saving" />
@@ -277,4 +277,15 @@ async function verifyEmail() {
 	display: flex;
 	justify-content: center;
 }
+
+@media(--small-20) {
+	.setting {
+		flex-direction: column;
+		align-items: flex-start;
+	}
+
+	.setting-label {
+		margin-bottom: .75rem;
+	}
+}
 </style>

components/user/preferences.vue

@@ -25,7 +25,7 @@ async function updateSettings() {
 		class="profile-section"
 		@submit.prevent
 	>
-		<div class="setting">
+		<div class="setting noflip">
 			<span class="setting-label">
 				<strong class="setting-title">Enable alert notifications</strong>
 				<span class="setting-description">Your alerts can trigger notifications in traxxx</span>
@@ -39,7 +39,7 @@ async function updateSettings() {
 			</span>
 		</div>
 
-		<div class="setting">
+		<div class="setting noflip">
 			<span class="setting-label">
 				<strong class="setting-title">Enable alert e-mails</strong>
 				<span class="setting-description">Your alerts can trigger e-mails</span>
@@ -53,7 +53,7 @@ async function updateSettings() {
 			</span>
 		</div>
 
-		<label class="setting">
+		<div class="setting">
 			<span class="setting-label">
 				<strong class="setting-title">Alert e-mail frequency</strong>
 				<span class="setting-description">Alert e-mails are sent immediately, or accumulated and sent periodically</span>
@@ -71,7 +71,7 @@ async function updateSettings() {
 					<option value="monthly">Monthly</option>
 				</select>
 			</span>
-		</label>
+		</div>
 	</form>
 </template>
 
@@ -112,4 +112,15 @@ async function updateSettings() {
 	color: var(--glass);
 	font-size: .9rem;
 }
+
+@media(--small-20) {
+	.setting:not(.noflip) {
+		flex-direction: column;
+		align-items: flex-start;
+	}
+
+	.setting-label {
+		margin-bottom: .75rem;
+	}
+}
 </style>