fix: Fix missing avatar image in Vercel connection settings (#41348)

* Fix the Vercel avatar image when going back to the URL.

* Fix portal issues on org and project linkers.

* Remove misleading comment.

* Use png format when requesting Vercel avatar.

* Fix a type error.

* Fix a missing import.

---------

Co-authored-by: Ali Waseem <waseema393@gmail.com>

apps/studio/components/interfaces/Integrations/Vercel/OrganizationPicker.tsx

@@ -88,7 +88,8 @@ const OrganizationPicker = ({
           className="p-0 w-full"
           side="bottom"
           align="center"
-          style={{ width: ref.current?.offsetWidth }}
+          portal
+          sameWidthAsTrigger
         >
           <Command_Shadcn_>
             <CommandInput_Shadcn_ placeholder="Search organizations..." />

apps/studio/components/interfaces/Integrations/VercelGithub/ProjectLinker.tsx

@@ -328,6 +328,7 @@ const ProjectLinker = ({
                   side="bottom"
                   align="center"
                   sameWidthAsTrigger
+                  portal
                 >
                   <Command_Shadcn_>
                     <CommandInput_Shadcn_ placeholder="Search for a project" />

apps/studio/components/interfaces/Settings/Integrations/VercelIntegration/VercelSection.tsx

@@ -23,6 +23,7 @@ import { useOrgIntegrationsQuery } from 'data/integrations/integrations-query-or
 import { useIntegrationsVercelInstalledConnectionDeleteMutation } from 'data/integrations/integrations-vercel-installed-connection-delete-mutation'
 import { useVercelProjectsQuery } from 'data/integrations/integrations-vercel-projects-query'
 import type {
+  Integration,
   IntegrationName,
   IntegrationProjectConnection,
 } from 'data/integrations/integrations.types'
@@ -69,10 +70,19 @@ const VercelSection = ({ isProjectScoped }: { isProjectScoped: boolean }) => {
         if (integration.metadata && integration.integration.name === 'Vercel') {
           const avatarSrc =
             !integration.metadata.account.avatar && integration.metadata.account.type === 'Team'
-              ? `https://vercel.com/api/www/avatar?teamId=${integration.metadata.account.team_id}&s=48`
+              ? `https://vercel.com/api/www/avatar?teamId=${integration.metadata.account.team_id}&s=48&format=png`
               : `https://vercel.com/api/www/avatar/${integration.metadata.account.avatar}?s=48`
 
-          integration['metadata']['account']['avatar'] = avatarSrc
+          return {
+            ...integration,
+            metadata: {
+              ...integration.metadata,
+              account: {
+                ...integration.metadata.account,
+                avatar: avatarSrc,
+              },
+            },
+          } as Integration
         }
 
         return integration

apps/studio/next.config.js

@@ -523,7 +523,6 @@ const nextConfig = {
     ]
   },
   images: {
-    // to make Vercel avatars work without issue. Vercel uses SVGs for users who don't have set avatars.
     dangerouslyAllowSVG: false,
     remotePatterns: [
       {