From c1b77e46961d4a9053be885fe1d3f4a94bfbe01e Mon Sep 17 00:00:00 2001
From: Dotta <bippadotta@protonmail.com>
Date: Wed, 15 Apr 2026 21:15:24 -0500
Subject: [PATCH] Fix invite logo aspect ratio

---
 ui/src/components/CompanyPatternIcon.tsx |  7 +++-
 ui/src/pages/InviteLanding.test.tsx      |  4 ++-
 ui/src/pages/InviteLanding.tsx           | 46 +++++++++++++++++-------
 3 files changed, 43 insertions(+), 14 deletions(-)

diff --git a/ui/src/components/CompanyPatternIcon.tsx b/ui/src/components/CompanyPatternIcon.tsx
index 6ea40788592..6591f7d13a4 100644
--- a/ui/src/components/CompanyPatternIcon.tsx
+++ b/ui/src/components/CompanyPatternIcon.tsx
@@ -13,6 +13,7 @@ interface CompanyPatternIconProps {
   logoUrl?: string | null;
   brandColor?: string | null;
   className?: string;
+  logoFit?: "cover" | "contain";
 }
 
 function hashString(value: string): number {
@@ -165,6 +166,7 @@ export function CompanyPatternIcon({
   logoUrl,
   brandColor,
   className,
+  logoFit = "cover",
 }: CompanyPatternIconProps) {
   const initial = companyName.trim().charAt(0).toUpperCase() || "?";
   const [imageError, setImageError] = useState(false);
@@ -189,7 +191,10 @@ export function CompanyPatternIcon({
           src={logo}
           alt={`${companyName} logo`}
           onError={() => setImageError(true)}
-          className="absolute inset-0 h-full w-full object-cover"
+          className={cn(
+            "absolute inset-0 h-full w-full",
+            logoFit === "contain" ? "object-contain" : "object-cover",
+          )}
         />
       ) : patternDataUrl ? (
         <img
diff --git a/ui/src/pages/InviteLanding.test.tsx b/ui/src/pages/InviteLanding.test.tsx
index 95a52db8ec2..0fe56c2dc2f 100644
--- a/ui/src/pages/InviteLanding.test.tsx
+++ b/ui/src/pages/InviteLanding.test.tsx
@@ -153,7 +153,9 @@ describe("InviteLandingPage", () => {
     expect(container.textContent).toContain("Message from inviter");
     expect(container.querySelector('[data-testid="invite-inline-auth"]')).not.toBeNull();
     expect(localStorage.getItem("paperclip:pending-invite-token")).toBe("pcp_invite_test");
-    expect(container.querySelector('img[alt="Acme Robotics logo"]')).not.toBeNull();
+    const inviteLogo = container.querySelector('img[alt="Acme Robotics logo"]');
+    expect(inviteLogo).not.toBeNull();
+    expect(inviteLogo?.className).toContain("object-contain");
     expect(container.querySelector('input[name="name"]')).not.toBeNull();
 
     const nameInput = container.querySelector('input[name="name"]') as HTMLInputElement | null;
diff --git a/ui/src/pages/InviteLanding.tsx b/ui/src/pages/InviteLanding.tsx
index e6922e5a221..7dcef629b3f 100644
--- a/ui/src/pages/InviteLanding.tsx
+++ b/ui/src/pages/InviteLanding.tsx
@@ -129,6 +129,28 @@ type AwaitingJoinApprovalPanelProps = {
   onboardingTextUrl?: string | null;
 };
 
+function InviteCompanyLogo({
+  companyDisplayName,
+  companyLogoUrl,
+  companyBrandColor,
+  className,
+}: {
+  companyDisplayName: string;
+  companyLogoUrl: string | null;
+  companyBrandColor: string | null;
+  className?: string;
+}) {
+  return (
+    <CompanyPatternIcon
+      companyName={companyDisplayName}
+      logoUrl={companyLogoUrl}
+      brandColor={companyBrandColor}
+      logoFit="contain"
+      className={className}
+    />
+  );
+}
+
 function AwaitingJoinApprovalPanel({
   companyDisplayName,
   companyLogoUrl,
@@ -145,10 +167,10 @@ function AwaitingJoinApprovalPanel({
     <div className="min-h-screen bg-zinc-950 px-6 py-12 text-zinc-100">
       <div className="mx-auto max-w-md border border-zinc-800 bg-zinc-950 p-6" data-testid="invite-pending-approval">
         <div className="flex items-center gap-3">
-          <CompanyPatternIcon
-            companyName={companyDisplayName}
-            logoUrl={companyLogoUrl}
-            brandColor={companyBrandColor}
+          <InviteCompanyLogo
+            companyDisplayName={companyDisplayName}
+            companyLogoUrl={companyLogoUrl}
+            companyBrandColor={companyBrandColor}
             className="h-12 w-12 border border-zinc-800 rounded-none"
           />
           <h1 className="text-lg font-semibold">Request to join {companyDisplayName}</h1>
@@ -486,10 +508,10 @@ export function InviteLandingPage() {
         <div className="min-h-screen bg-zinc-950 px-6 py-12 text-zinc-100">
           <div className="mx-auto max-w-md border border-zinc-800 bg-zinc-950 p-6">
             <div className="flex items-center gap-3">
-              <CompanyPatternIcon
-                companyName={companyDisplayName}
-                logoUrl={companyLogoUrl}
-                brandColor={companyBrandColor}
+              <InviteCompanyLogo
+                companyDisplayName={companyDisplayName}
+                companyLogoUrl={companyLogoUrl}
+                companyBrandColor={companyBrandColor}
                 className="h-12 w-12 border border-zinc-800 rounded-none"
               />
               <h1 className="text-lg font-semibold">You joined the company</h1>
@@ -521,10 +543,10 @@ export function InviteLandingPage() {
         <div className="grid gap-6 lg:grid-cols-[minmax(0,1.15fr)_minmax(360px,0.85fr)]">
           <section className={`${panelClassName} space-y-6`}>
             <div className="flex items-start gap-4">
-              <CompanyPatternIcon
-                companyName={companyDisplayName}
-                logoUrl={companyLogoUrl}
-                brandColor={companyBrandColor}
+              <InviteCompanyLogo
+                companyDisplayName={companyDisplayName}
+                companyLogoUrl={companyLogoUrl}
+                companyBrandColor={companyBrandColor}
                 className="h-16 w-16 rounded-none border border-zinc-800"
               />
               <div className="min-w-0">