From 96017097ec5d5e96abcb263a843a1cc91f15693b Mon Sep 17 00:00:00 2001
From: LekoArts <lekoarts@gmail.com>
Date: Mon, 3 Jun 2024 14:02:12 +0200
Subject: [PATCH] fix(clerk-js): Do not distort application logo

---
 .changeset/chilly-garlics-reply.md                    | 5 +++++
 packages/clerk-js/src/ui/elements/ApplicationLogo.tsx | 4 ++--
 2 files changed, 7 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/chilly-garlics-reply.md

diff --git a/.changeset/chilly-garlics-reply.md b/.changeset/chilly-garlics-reply.md
new file mode 100644
index 00000000000..63ae8cc7528
--- /dev/null
+++ b/.changeset/chilly-garlics-reply.md
@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+In some instances your application logo (shown at the top of the sign-in/sign-up form of the prebuilt components) might have been distorted in browsers like Firefox. By applying `object-fit: contain` to the image's CSS the logo now fills its bounding box without being distorted.
diff --git a/packages/clerk-js/src/ui/elements/ApplicationLogo.tsx b/packages/clerk-js/src/ui/elements/ApplicationLogo.tsx
index 1bd8997ec68..cec97054186 100644
--- a/packages/clerk-js/src/ui/elements/ApplicationLogo.tsx
+++ b/packages/clerk-js/src/ui/elements/ApplicationLogo.tsx
@@ -49,7 +49,8 @@ export const ApplicationLogo = (props: ApplicationLogoProps) => {
       sx={{
         display: loaded ? 'inline-block' : 'none',
         height: '100%',
-        width: 'auto',
+        width: '100%',
+        objectFit: 'contain',
       }}
     />
   );
@@ -61,7 +62,6 @@ export const ApplicationLogo = (props: ApplicationLogoProps) => {
       sx={[
         theme => ({
           height: getContainerHeightForImageRatio(imageRef, theme.sizes.$4),
-          objectFit: 'cover',
           justifyContent: 'center',
         }),
         props.sx,