From 01db8c0a46b69a15a40951ba863e6bc08fa8e1f8 Mon Sep 17 00:00:00 2001
From: Elias Schneider <login@eliasschneider.com>
Date: Tue, 30 Sep 2025 12:12:37 +0200
Subject: [PATCH] fix: make logo and oidc client images sizes consistent

---
 frontend/src/lib/components/image-box.svelte              | 2 +-
 frontend/src/lib/components/logo.svelte                   | 8 +++++++-
 .../authorize/components/client-provider-images.svelte    | 2 +-
 .../settings/admin/oidc-clients/oidc-client-list.svelte   | 2 +-
 .../settings/apps/authorized-oidc-client-card.svelte      | 5 +----
 5 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/frontend/src/lib/components/image-box.svelte b/frontend/src/lib/components/image-box.svelte
index 862ac6fd..f86696a9 100644
--- a/frontend/src/lib/components/image-box.svelte
+++ b/frontend/src/lib/components/image-box.svelte
@@ -18,7 +18,7 @@
 	{:else}
 		<img
 			{...props}
-			class={cn('object-contain', props.class)}
+			class={cn('object-contain aspect-square', props.class)}
 			onerror={() => (error = true)}
 		/>
 	{/if}
diff --git a/frontend/src/lib/components/logo.svelte b/frontend/src/lib/components/logo.svelte
index d79a0766..bbcc35ef 100644
--- a/frontend/src/lib/components/logo.svelte
+++ b/frontend/src/lib/components/logo.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { m } from '$lib/paraglide/messages';
 	import { cachedApplicationLogo } from '$lib/utils/cached-image-util';
+	import { cn } from '$lib/utils/style';
 	import { mode } from 'mode-watcher';
 	import type { HTMLAttributes } from 'svelte/elements';
 
@@ -9,4 +10,9 @@
 	const isLightMode = $derived(mode.current === 'light');
 </script>
 
-<img {...props} src={cachedApplicationLogo.getUrl(isLightMode)} alt={m.logo()} />
+<img
+	{...props}
+	class={cn('aspect-square object-contain', props.class)}
+	src={cachedApplicationLogo.getUrl(isLightMode)}
+	alt={m.logo()}
+/>
diff --git a/frontend/src/routes/authorize/components/client-provider-images.svelte b/frontend/src/routes/authorize/components/client-provider-images.svelte
index 946e2986..db3c03c8 100644
--- a/frontend/src/routes/authorize/components/client-provider-images.svelte
+++ b/frontend/src/routes/authorize/components/client-provider-images.svelte
@@ -60,7 +60,7 @@
 			</div>
 		{:else if client.hasLogo}
 			<img
-				class="size-10"
+				class="size-10 aspect-square object-contain"
 				src={cachedOidcClientLogo.getUrl(client.id)}
 				draggable={false}
 				alt={m.client_logo()}
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 59353cc3..a430314a 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
@@ -59,7 +59,7 @@
 		<Table.Cell class="w-8 font-medium">
 			{#if item.hasLogo}
 				<ImageBox
-					class="min-h-8 min-w-8 object-contain"
+					class="min-h-8 min-w-8"
 					src={cachedOidcClientLogo.getUrl(item.id)}
 					alt={m.name_logo({ name: item.name })}
 				/>
diff --git a/frontend/src/routes/settings/apps/authorized-oidc-client-card.svelte b/frontend/src/routes/settings/apps/authorized-oidc-client-card.svelte
index 198156a8..e647810f 100644
--- a/frontend/src/routes/settings/apps/authorized-oidc-client-card.svelte
+++ b/frontend/src/routes/settings/apps/authorized-oidc-client-card.svelte
@@ -38,7 +38,7 @@
 		<div class="flex gap-3">
 			<div class="aspect-square h-[56px]">
 				<ImageBox
-					class="h-8 w-8 grow rounded-lg object-contain"
+					class="size-8"
 					src={client.hasLogo
 						? cachedOidcClientLogo.getUrl(client.id)
 						: cachedApplicationLogo.getUrl(isLightMode)}
@@ -124,6 +124,3 @@
 		</div>
 	</Card.Content>
 </Card.Root>
-
-<style>
-</style>