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>