From 2910c517bb7545f932c34321907299064b08bb10 Mon Sep 17 00:00:00 2001
From: Elias Schneider <login@eliasschneider.com>
Date: Fri, 10 Jul 2026 15:56:47 +0200
Subject: [PATCH] fix: mobile layout improvements

---
 frontend/src/routes/interaction/+page.svelte  |  4 ++--
 .../routes/settings/admin/apis/+page.svelte   |  5 +++-
 .../oidc-clients/oidc-client-form.svelte      | 24 ++++++++++---------
 3 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/frontend/src/routes/interaction/+page.svelte b/frontend/src/routes/interaction/+page.svelte
index fd438552..a68a1f22 100644
--- a/frontend/src/routes/interaction/+page.svelte
+++ b/frontend/src/routes/interaction/+page.svelte
@@ -140,7 +140,7 @@
 			data-testid="account-selection"
 		>
 			{#if $userStore}
-				<Card.Root class="mb-2 py-4 w-sm">
+				<Card.Root class="mb-2 py-4 sm:min-w-sm w-full mx-5">
 					<Card.Content class="flex items-center gap-4">
 						<Avatar.Root class="size-11 shrink-0">
 							<Avatar.Image src={cachedProfilePicture.getUrl($userStore.id)} />
@@ -182,7 +182,7 @@
 				</Card.Header>
 				<Card.Content>
 					<ScopeList
-						scopes={(interactionSession.scopes || [])}
+						scopes={interactionSession.scopes || []}
 						scopeInfo={interactionSession.scopeInfo ?? []}
 					/>
 				</Card.Content>
diff --git a/frontend/src/routes/settings/admin/apis/+page.svelte b/frontend/src/routes/settings/admin/apis/+page.svelte
index 67fb1c30..301448ae 100644
--- a/frontend/src/routes/settings/admin/apis/+page.svelte
+++ b/frontend/src/routes/settings/admin/apis/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
+	import FormattedMessage from '$lib/components/formatted-message.svelte';
 	import { Button } from '$lib/components/ui/button';
 	import * as Card from '$lib/components/ui/card';
 	import { m } from '$lib/paraglide/messages';
@@ -45,7 +46,9 @@
 						<LucidePlus class="text-primary/80 size-5" />
 						{m.create_api()}
 					</Card.Title>
-					<Card.Description>{m.create_a_new_api_description()}</Card.Description>
+					<Card.Description
+						><FormattedMessage m={m.create_a_new_api_description()} /></Card.Description
+					>
 				</div>
 				{#if !expandAddApi}
 					<Button class="w-full md:w-auto" onclick={() => (expandAddApi = true)}
diff --git a/frontend/src/routes/settings/admin/oidc-clients/oidc-client-form.svelte b/frontend/src/routes/settings/admin/oidc-clients/oidc-client-form.svelte
index 7f618199..4c3cdbfb 100644
--- a/frontend/src/routes/settings/admin/oidc-clients/oidc-client-form.svelte
+++ b/frontend/src/routes/settings/admin/oidc-clients/oidc-client-form.svelte
@@ -215,17 +215,19 @@
 			bind:callbackURLs={$inputs.logoutCallbackURLs.value}
 			bind:error={$inputs.logoutCallbackURLs.error}
 		/>
-		<SwitchWithLabel
-			id="public-client"
-			label={m.public_client()}
-			description={m.public_clients_description()}
-			onCheckedChange={(v) => {
-				if (v) {
-					$inputs.pkceEnabled.value = true;
-				}
-			}}
-			bind:checked={$inputs.isPublic.value}
-		/>
+		<div>
+			<SwitchWithLabel
+				id="public-client"
+				label={m.public_client()}
+				description={m.public_clients_description()}
+				onCheckedChange={(v) => {
+					if (v) {
+						$inputs.pkceEnabled.value = true;
+					}
+				}}
+				bind:checked={$inputs.isPublic.value}
+			/>
+		</div>
 		<div
 			class="rounded-lg transition-all duration-200"
 			class:[&_[data-switch-root]]:ring-2={pkcePromptNeeded}