From 9d4b621caa412f5fa5866d9e445e31b000615e43 Mon Sep 17 00:00:00 2001
From: James18232 <180368042+James18232@users.noreply.github.com>
Date: Tue, 16 Jun 2026 17:35:30 +1000
Subject: [PATCH] fix: add responsive css for api/user/group/client page add
 buttons (#1508)

Co-authored-by: james <james@goldfish.net>
Co-authored-by: Elias Schneider <login@eliasschneider.com>
---
 frontend/src/routes/settings/admin/api-keys/+page.svelte     | 4 ++--
 frontend/src/routes/settings/admin/oidc-clients/+page.svelte | 4 ++--
 frontend/src/routes/settings/admin/user-groups/+page.svelte  | 4 ++--
 frontend/src/routes/settings/admin/users/+page.svelte        | 4 ++--
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/frontend/src/routes/settings/admin/api-keys/+page.svelte b/frontend/src/routes/settings/admin/api-keys/+page.svelte
index 06317a69..a26fb3ba 100644
--- a/frontend/src/routes/settings/admin/api-keys/+page.svelte
+++ b/frontend/src/routes/settings/admin/api-keys/+page.svelte
@@ -36,7 +36,7 @@
 
 <Card.Root>
 	<Card.Header>
-		<div class="flex items-center justify-between">
+		<div class="flex flex-wrap items-center justify-between md:flex-nowrap gap-4">
 			<div>
 				<Card.Title>
 					<ShieldPlus class="text-primary/80 size-5" />
@@ -47,7 +47,7 @@
 				>
 			</div>
 			{#if !expandAddApiKey}
-				<Button onclick={() => (expandAddApiKey = true)}>{m.add_api_key()}</Button>
+				<Button class="w-full md:w-auto" onclick={() => (expandAddApiKey = true)}>{m.add_api_key()}</Button>
 			{:else}
 				<Button class="h-8 p-3" variant="ghost" onclick={() => (expandAddApiKey = false)}>
 					<LucideMinus class="size-5" />
diff --git a/frontend/src/routes/settings/admin/oidc-clients/+page.svelte b/frontend/src/routes/settings/admin/oidc-clients/+page.svelte
index d442a5be..18badb57 100644
--- a/frontend/src/routes/settings/admin/oidc-clients/+page.svelte
+++ b/frontend/src/routes/settings/admin/oidc-clients/+page.svelte
@@ -49,7 +49,7 @@
 <div>
 	<Card.Root>
 		<Card.Header>
-			<div class="flex items-center justify-between">
+			<div class="flex flex-wrap items-center justify-between md:flex-nowrap gap-4">
 				<div>
 					<Card.Title>
 						<ShieldPlus class="text-primary/80 size-5" />
@@ -62,7 +62,7 @@
 					>
 				</div>
 				{#if !expandAddClient}
-					<Button onclick={() => (expandAddClient = true)}>{m.add_oidc_client()}</Button>
+					<Button class="w-full md:w-auto" onclick={() => (expandAddClient = true)}>{m.add_oidc_client()}</Button>
 				{:else}
 					<Button class="h-8 p-3" variant="ghost" onclick={() => (expandAddClient = false)}>
 						<LucideMinus class="size-5" />
diff --git a/frontend/src/routes/settings/admin/user-groups/+page.svelte b/frontend/src/routes/settings/admin/user-groups/+page.svelte
index 2307c74a..2edc6071 100644
--- a/frontend/src/routes/settings/admin/user-groups/+page.svelte
+++ b/frontend/src/routes/settings/admin/user-groups/+page.svelte
@@ -39,7 +39,7 @@
 <div>
 	<Card.Root>
 		<Card.Header>
-			<div class="flex items-center justify-between">
+			<div class="flex flex-wrap items-center justify-between md:flex-nowrap gap-4">
 				<div>
 					<Card.Title>
 						<UserPlus class="text-primary/80 size-5" />
@@ -49,7 +49,7 @@
 					>
 				</div>
 				{#if !expandAddUserGroup}
-					<Button onclick={() => (expandAddUserGroup = true)}>{m.add_group()}</Button>
+					<Button class="w-full md:w-auto" onclick={() => (expandAddUserGroup = true)}>{m.add_group()}</Button>
 				{:else}
 					<Button class="h-8 p-3" variant="ghost" onclick={() => (expandAddUserGroup = false)}>
 						<LucideMinus class="size-5" />
diff --git a/frontend/src/routes/settings/admin/users/+page.svelte b/frontend/src/routes/settings/admin/users/+page.svelte
index d440e380..09fd5b68 100644
--- a/frontend/src/routes/settings/admin/users/+page.svelte
+++ b/frontend/src/routes/settings/admin/users/+page.svelte
@@ -48,7 +48,7 @@
 <div>
 	<Card.Root>
 		<Card.Header>
-			<div class="flex items-center justify-between">
+			<div class="flex flex-wrap items-center justify-between md:flex-nowrap gap-4">
 				<div>
 					<Card.Title>
 						<UserPlus class="text-primary/80 size-5" />
@@ -82,7 +82,7 @@
 							</DropdownButton.Content>
 						</DropdownButton.DropdownRoot>
 					{:else}
-						<Button onclick={() => (expandAddUser = true)}>{m.add_user()}</Button>
+						<Button class="w-full md:w-auto" onclick={() => (expandAddUser = true)}>{m.add_user()}</Button>
 					{/if}
 				{:else}
 					<Button class="h-8 p-3" variant="ghost" onclick={() => (expandAddUser = false)}>