From a81343c519c483c66b60c1208725bc9be05b080e Mon Sep 17 00:00:00 2001
From: DebaucheryLibrarian <DebaucheryLibrarian@unknown.name>
Date: Wed, 22 Jul 2026 17:07:23 +0200
Subject: [PATCH] Improved mobile scaling of preferences and account settings.

---
 components/user/account.vue     | 23 +++++++++++++++++------
 components/user/preferences.vue | 19 +++++++++++++++----
 2 files changed, 32 insertions(+), 10 deletions(-)

diff --git a/components/user/account.vue b/components/user/account.vue
index f531f4d..2c78a45 100644
--- a/components/user/account.vue
+++ b/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>
diff --git a/components/user/preferences.vue b/components/user/preferences.vue
index 0489a98..fa69a0e 100644
--- a/components/user/preferences.vue
+++ b/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>