From 448c2127d5b4b15780d102b0798f725f471edaea Mon Sep 17 00:00:00 2001
From: Frederic Cabassut <frederic.cabassut@arte.tv>
Date: Mon, 9 Mar 2026 21:33:58 +0100
Subject: [PATCH] fix: prevent settings page elements from overflowing on
 mobile

Stack MCP key form, API key items, user list rows, and delete
account confirmation vertically on small screens using
flex-col/sm:flex-row. Add truncate on user names/emails.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/routes/(app)/settings/+page.svelte       |  4 ++--
 src/routes/(app)/settings/mcp/+page.svelte   |  6 +++---
 src/routes/(app)/settings/users/+page.svelte | 10 +++++-----
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/routes/(app)/settings/+page.svelte b/src/routes/(app)/settings/+page.svelte
index 5e721e8..de680f8 100644
--- a/src/routes/(app)/settings/+page.svelte
+++ b/src/routes/(app)/settings/+page.svelte
@@ -328,7 +328,7 @@
 				<div class="mb-3 text-sm text-[var(--error-text)]">{deleteMsg}</div>
 			{/if}
 
-			<div class="flex items-center gap-3">
+			<div class="flex flex-col gap-3 sm:flex-row sm:items-center">
 				<input
 					type="password"
 					bind:value={deletePassword}
@@ -337,7 +337,7 @@
 				/>
 				<button
 					onclick={deleteAccount}
-					class="rounded-sm bg-[var(--destructive)] px-4 py-2 text-sm font-medium text-white hover:opacity-90"
+					class="whitespace-nowrap rounded-sm bg-[var(--destructive)] px-4 py-2 text-sm font-medium text-white hover:opacity-90"
 				>
 					Confirm delete
 				</button>
diff --git a/src/routes/(app)/settings/mcp/+page.svelte b/src/routes/(app)/settings/mcp/+page.svelte
index 1e81553..f38d018 100644
--- a/src/routes/(app)/settings/mcp/+page.svelte
+++ b/src/routes/(app)/settings/mcp/+page.svelte
@@ -126,7 +126,7 @@ ${mcpJsonConfig}`);
 	</p>
 
 	<!-- Create Key Form -->
-	<form onsubmit={createKey} class="mb-6 flex gap-2">
+	<form onsubmit={createKey} class="mb-6 flex flex-col gap-2 sm:flex-row">
 		<input
 			type="text"
 			bind:value={newKeyName}
@@ -182,7 +182,7 @@ ${mcpJsonConfig}`);
 	{:else}
 		<div class="space-y-2" data-testid="api-keys-list">
 			{#each keys as key (key.id)}
-				<div class="flex items-center justify-between rounded-sm border border-[var(--border-subtle)] bg-[var(--bg-base)] px-4 py-3" data-testid="api-key-item">
+				<div class="flex flex-col gap-2 rounded-sm border border-[var(--border-subtle)] bg-[var(--bg-base)] px-4 py-3 sm:flex-row sm:items-center sm:justify-between" data-testid="api-key-item">
 					<div class="min-w-0 flex-1">
 						<div class="flex items-center gap-2">
 							<span class="text-sm font-medium text-[var(--text)]" data-testid="api-key-name">{key.name}</span>
@@ -195,7 +195,7 @@ ${mcpJsonConfig}`);
 							{/if}
 						</div>
 					</div>
-					<div class="ml-4">
+					<div class="sm:ml-4">
 						{#if deleteConfirmId === key.id}
 							<div class="flex items-center gap-1">
 								<button
diff --git a/src/routes/(app)/settings/users/+page.svelte b/src/routes/(app)/settings/users/+page.svelte
index 14f9448..7ab2750 100644
--- a/src/routes/(app)/settings/users/+page.svelte
+++ b/src/routes/(app)/settings/users/+page.svelte
@@ -167,17 +167,17 @@
 
 		<div class="space-y-3">
 			{#each users as user (user.id)}
-				<div class="flex items-center justify-between rounded-sm border border-[var(--border-subtle)] p-4">
-					<div>
-						<p class="font-medium text-[var(--text)]">
+				<div class="flex flex-col gap-2 rounded-sm border border-[var(--border-subtle)] p-4 sm:flex-row sm:items-center sm:justify-between">
+					<div class="min-w-0">
+						<p class="truncate font-medium text-[var(--text)]">
 							{user.displayName || user.email}
 							{#if user.role === 'admin'}
 								<span class="ml-2 rounded-sm bg-[var(--primary)]/15 px-2 py-0.5 text-xs text-[var(--primary)]">admin</span>
 							{/if}
 						</p>
-						<p class="text-sm text-[var(--text-muted)]">{user.email}</p>
+						<p class="truncate text-sm text-[var(--text-muted)]">{user.email}</p>
 					</div>
-					<div class="flex items-center gap-2">
+					<div class="flex flex-wrap items-center gap-2">
 						<button
 							onclick={() => toggleRole(user)}
 							class="rounded-sm px-3 py-1 text-xs text-[var(--text-muted)] hover:bg-[var(--border-subtle)]/50"