fix(clerk-js): Do not distort application logo

.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.

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,