From 3de1301fa84b3ab4fff4242d827c7794d44910f2 Mon Sep 17 00:00:00 2001
From: Elias Schneider <login@eliasschneider.com>
Date: Fri, 14 Feb 2025 16:03:17 +0100
Subject: [PATCH] fix: layout of OIDC client details page on mobile

---
 .../lib/components/copy-to-clipboard.svelte   | 22 +++++++-------
 .../admin/oidc-clients/[id]/+page.svelte      | 30 ++++++++++---------
 .../oidc-clients/oidc-client-form.svelte      |  2 +-
 3 files changed, 27 insertions(+), 27 deletions(-)

diff --git a/frontend/src/lib/components/copy-to-clipboard.svelte b/frontend/src/lib/components/copy-to-clipboard.svelte
index 1e21b1cf..2f6f4189 100644
--- a/frontend/src/lib/components/copy-to-clipboard.svelte
+++ b/frontend/src/lib/components/copy-to-clipboard.svelte
@@ -27,15 +27,13 @@
 	}
 </script>
 
-<button onclick={onClick}>
-	<Tooltip.Root closeOnPointerDown={false} {onOpenChange} {open}>
-		<Tooltip.Trigger>{@render children()}</Tooltip.Trigger>
-		<Tooltip.Content onclick={copyToClipboard}>
-			{#if copied}
-				<span class="flex items-center"><LucideCheck class="mr-1 h-4 w-4" /> Copied</span>
-			{:else}
-				<span>Click to copy</span>
-			{/if}
-		</Tooltip.Content>
-	</Tooltip.Root>
-</button>
+<Tooltip.Root closeOnPointerDown={false} {onOpenChange} {open}>
+	<Tooltip.Trigger class="text-start" onclick={onClick}>{@render children()}</Tooltip.Trigger>
+	<Tooltip.Content onclick={copyToClipboard}>
+		{#if copied}
+			<span class="flex items-center"><LucideCheck class="mr-1 h-4 w-4" /> Copied</span>
+		{:else}
+			<span>Click to copy</span>
+		{/if}
+	</Tooltip.Content>
+</Tooltip.Root>
diff --git a/frontend/src/routes/settings/admin/oidc-clients/[id]/+page.svelte b/frontend/src/routes/settings/admin/oidc-clients/[id]/+page.svelte
index 96f3f5c6..91e8be31 100644
--- a/frontend/src/routes/settings/admin/oidc-clients/[id]/+page.svelte
+++ b/frontend/src/routes/settings/admin/oidc-clients/[id]/+page.svelte
@@ -112,15 +112,15 @@
 	</Card.Header>
 	<Card.Content>
 		<div class="flex flex-col">
-			<div class="mb-2 flex items-center">
+			<div class="mb-2 flex flex-col sm:flex-row sm:items-center">
 				<Label class="mb-0 w-44">Client ID</Label>
 				<CopyToClipboard value={client.id}>
 					<span class="text-muted-foreground text-sm" data-testid="client-id"> {client.id}</span>
 				</CopyToClipboard>
 			</div>
 			{#if !client.isPublic}
-				<div class="mb-2 mt-1 flex items-center">
-					<Label class="w-44">Client secret</Label>
+				<div class="mb-2 mt-1 flex flex-col sm:flex-row sm:items-center">
+					<Label class="mb-0 w-44">Client secret</Label>
 					{#if $clientSecretStore}
 						<CopyToClipboard value={$clientSecretStore}>
 							<span class="text-muted-foreground text-sm" data-testid="client-secret">
@@ -128,23 +128,25 @@
 							</span>
 						</CopyToClipboard>
 					{:else}
-						<span class="text-muted-foreground text-sm" data-testid="client-secret"
-							>••••••••••••••••••••••••••••••••</span
-						>
-						<Button
-							class="ml-2"
-							onclick={createClientSecret}
-							size="sm"
-							variant="ghost"
-							aria-label="Create new client secret"><LucideRefreshCcw class="h-3 w-3" /></Button
-						>
+						<div>
+							<span class="text-muted-foreground text-sm" data-testid="client-secret"
+								>••••••••••••••••••••••••••••••••</span
+							>
+							<Button
+								class="ml-2"
+								onclick={createClientSecret}
+								size="sm"
+								variant="ghost"
+								aria-label="Create new client secret"><LucideRefreshCcw class="h-3 w-3" /></Button
+							>
+						</div>
 					{/if}
 				</div>
 			{/if}
 			{#if showAllDetails}
 				<div transition:slide>
 					{#each Object.entries(setupDetails) as [key, value]}
-						<div class="mb-5 flex items-center">
+						<div class="mb-5 flex flex-col sm:flex-row sm:items-center">
 							<Label class="mb-0 w-44">{key}</Label>
 							<CopyToClipboard {value}>
 								<span class="text-muted-foreground text-sm">{value}</span>
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 a26685dc..ed5024cc 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
@@ -76,7 +76,7 @@
 </script>
 
 <form onsubmit={onSubmit}>
-	<div class="grid grid-cols-2 gap-x-3 gap-y-7 sm:flex-row">
+	<div class="grid grid-cols-1 md:grid-cols-2 gap-x-3 gap-y-7 sm:flex-row">
 		<FormInput label="Name" class="w-full" bind:input={$inputs.name} />
 		<OidcCallbackUrlInput
 			class="w-full"