fix: layout of OIDC client details page on mobile

frontend/src/lib/components/copy-to-clipboard.svelte

@@ -27,15 +27,13 @@
 	}
 </script>
 
-<button onclick={onClick}>
+<Tooltip.Root closeOnPointerDown={false} {onOpenChange} {open}>
-	<Tooltip.Root closeOnPointerDown={false} {onOpenChange} {open}>
+	<Tooltip.Trigger class="text-start" onclick={onClick}>{@render children()}</Tooltip.Trigger>
-		<Tooltip.Trigger>{@render children()}</Tooltip.Trigger>
+	<Tooltip.Content onclick={copyToClipboard}>
-		<Tooltip.Content onclick={copyToClipboard}>
+		{#if copied}
-			{#if copied}
+			<span class="flex items-center"><LucideCheck class="mr-1 h-4 w-4" /> Copied</span>
-				<span class="flex items-center"><LucideCheck class="mr-1 h-4 w-4" /> Copied</span>
+		{:else}
-			{:else}
+			<span>Click to copy</span>
-				<span>Click to copy</span>
+		{/if}
-			{/if}
+	</Tooltip.Content>
-		</Tooltip.Content>
+</Tooltip.Root>
-	</Tooltip.Root>
-</button>

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">
+				<div class="mb-2 mt-1 flex flex-col sm:flex-row sm:items-center">
-					<Label class="w-44">Client secret</Label>
+					<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"
+						<div>
-							>••••••••••••••••••••••••••••••••</span
+							<span class="text-muted-foreground text-sm" data-testid="client-secret"
-						>
+								>••••••••••••••••••••••••••••••••</span
-						<Button
+							>
-							class="ml-2"
+							<Button
-							onclick={createClientSecret}
+								class="ml-2"
-							size="sm"
+								onclick={createClientSecret}
-							variant="ghost"
+								size="sm"
-							aria-label="Create new client secret"><LucideRefreshCcw class="h-3 w-3" /></Button
+								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>

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"