From 946c534b0877a074a6b658060f9af27e4061397c Mon Sep 17 00:00:00 2001
From: Elias Schneider <login@eliasschneider.com>
Date: Sat, 14 Jun 2025 19:33:40 +0200
Subject: [PATCH] fix: center oidc client images if they are smaller than the
 box

---
 frontend/src/lib/components/image-box.svelte      | 10 ++++++++++
 .../admin/oidc-clients/oidc-client-form.svelte    | 15 +++++++--------
 .../admin/oidc-clients/oidc-client-list.svelte    | 15 ++++++---------
 3 files changed, 23 insertions(+), 17 deletions(-)
 create mode 100644 frontend/src/lib/components/image-box.svelte

diff --git a/frontend/src/lib/components/image-box.svelte b/frontend/src/lib/components/image-box.svelte
new file mode 100644
index 00000000..29cae2d3
--- /dev/null
+++ b/frontend/src/lib/components/image-box.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/style';
+	import type { HTMLImgAttributes } from 'svelte/elements';
+
+	let props: HTMLImgAttributes & {} = $props();
+</script>
+
+<div class={'bg-muted flex items-center justify-center rounded-2xl p-3'}>
+	<img class={cn('size-24 object-contain', props.class)} {...props} />
+</div>
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 d67e7f86..397e5800 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
@@ -1,7 +1,8 @@
 <script lang="ts">
-	import SwitchWithLabel from '$lib/components/form/switch-with-label.svelte';
 	import FileInput from '$lib/components/form/file-input.svelte';
 	import FormInput from '$lib/components/form/form-input.svelte';
+	import SwitchWithLabel from '$lib/components/form/switch-with-label.svelte';
+	import ImageBox from '$lib/components/image-box.svelte';
 	import { Button } from '$lib/components/ui/button';
 	import Label from '$lib/components/ui/label/label.svelte';
 	import { m } from '$lib/paraglide/messages';
@@ -137,13 +138,11 @@
 		<Label for="logo">{m.logo()}</Label>
 		<div class="mt-2 flex items-end gap-3">
 			{#if logoDataURL}
-				<div class="bg-muted size-32 rounded-2xl p-3">
-					<img
-						class="m-auto max-h-full max-w-full object-contain"
-						src={logoDataURL}
-						alt={m.name_logo({ name: $inputs.name.value })}
-					/>
-				</div>
+				<ImageBox
+					class="size-24"
+					src={logoDataURL}
+					alt={m.name_logo({ name: $inputs.name.value })}
+				/>
 			{/if}
 			<div class="flex flex-col gap-2">
 				<FileInput
diff --git a/frontend/src/routes/settings/admin/oidc-clients/oidc-client-list.svelte b/frontend/src/routes/settings/admin/oidc-clients/oidc-client-list.svelte
index 7cbc059b..14bf36de 100644
--- a/frontend/src/routes/settings/admin/oidc-clients/oidc-client-list.svelte
+++ b/frontend/src/routes/settings/admin/oidc-clients/oidc-client-list.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import AdvancedTable from '$lib/components/advanced-table.svelte';
 	import { openConfirmDialog } from '$lib/components/confirm-dialog/';
+	import ImageBox from '$lib/components/image-box.svelte';
 	import { Button } from '$lib/components/ui/button';
 	import * as Table from '$lib/components/ui/table';
 	import { m } from '$lib/paraglide/messages';
@@ -56,15 +57,11 @@
 	{#snippet rows({ item })}
 		<Table.Cell class="w-8 font-medium">
 			{#if item.hasLogo}
-				<div class="bg-secondary rounded-2xl p-3">
-					<div class="size-8">
-						<img
-							class="m-auto max-h-full max-w-full object-contain"
-							src="/api/oidc/clients/{item.id}/logo"
-							alt={m.name_logo({ name: item.name })}
-						/>
-					</div>
-				</div>
+				<ImageBox
+					class="min-h-8 min-w-8"
+					src={`/api/oidc/clients/${item.id}/logo`}
+					alt={m.name_logo({ name: item.name })}
+				/>
 			{/if}
 		</Table.Cell>
 		<Table.Cell class="font-medium">{item.name}</Table.Cell>