fix(shared): truncate company badge overflow (#5900)

Author: rebelchris

AGENTS.md

@@ -196,6 +196,8 @@ pnpm --filter extension build:chrome # Build Chrome extension
 
 **IMPORTANT**: For changed `.ts`/`.tsx` files, run `node ./scripts/typecheck-strict-changed.js` or the package's strict `tsc` command before finishing. Do not add context-specific props to shared primitives when the behavior can be scoped in the parent list/container.
 
+**IMPORTANT**: For text truncation inside flex layouts, scope the ellipsis to the text element and make the nearest flex item shrinkable with `min-w-0` (and `flex-1` when it should consume remaining space). Do not rely on `truncate` on the whole row.
+
 **IMPORTANT**: When changing SEO, gating, or noindex logic, preserve existing `undefined`/nullable behavior unless the requirement explicitly changes it, and verify field names against the typed GraphQL model instead of ticket prose.
 
 ## Where Should I Put This Code?

packages/shared/src/components/VerifiedCompanyUserBadge.tsx

@@ -47,7 +47,7 @@ export const VerifiedCompanyUserBadge = ({
       side="bottom"
       className="text-center"
     >
-      <div className="flex items-center justify-center gap-1">
+      <div className="flex min-w-0 items-center justify-center gap-1">
         <ProfilePicture
           size={size}
           className="border border-border-subtlest-secondary"
@@ -59,8 +59,9 @@ export const VerifiedCompanyUserBadge = ({
         />
         {showCompanyName && (
           <Typography
-            type={companyNameTypography?.type}
+            type={companyNameTypography?.type ?? TypographyType.Footnote}
             color={companyNameTypography?.color || TypographyColor.Secondary}
+            truncate
           >
             {companies[0].name}
           </Typography>

packages/shared/src/components/cards/entity/UserEntityCard.tsx

@@ -192,7 +192,7 @@ const UserEntityCard = ({ user, className }: Props) => {
             dateFormat="MMM d. yyyy"
           />
         </div>
-        <div className="flex gap-2 truncate">
+        <div className="flex min-w-0 gap-2">
           {!!user?.reputation && (
             <div className="rounded-8 border border-border-subtlest-tertiary px-2">
               <ReputationUserBadge
@@ -204,12 +204,14 @@ const UserEntityCard = ({ user, className }: Props) => {
               />
             </div>
           )}
-          <VerifiedCompanyUserBadge
-            size={ProfileImageSize.Small}
-            user={user}
-            showCompanyName
-            showVerified
-          />
+          <div className="min-w-0 flex-1">
+            <VerifiedCompanyUserBadge
+              size={ProfileImageSize.Small}
+              user={user}
+              showCompanyName
+              showVerified
+            />
+          </div>
         </div>
         {bio && <EntityDescription copy={bio} length={100} />}
       </div>