diff --git a/web/components/contract/contract-details.tsx b/web/components/contract/contract-details.tsx
index bd37e5e3..6a8f5c9f 100644
--- a/web/components/contract/contract-details.tsx
+++ b/web/components/contract/contract-details.tsx
@@ -55,11 +55,7 @@ export function AbbrContractDetails(props: {
             avatarUrl={contract.creatorAvatarUrl}
             size={6}
           />
-          <UserLink
-            className="whitespace-nowrap"
-            name={creatorName}
-            username={creatorUsername}
-          />
+          <UserLink name={creatorName} username={creatorUsername} />
         </Row>
 
         <Row className="gap-3 text-gray-400">
diff --git a/web/components/user-page.tsx b/web/components/user-page.tsx
index 9f78165c..484fdc3e 100644
--- a/web/components/user-page.tsx
+++ b/web/components/user-page.tsx
@@ -19,7 +19,6 @@ import { Comment, getUsersComments } from 'web/lib/firebase/comments'
 import { Contract } from 'common/contract'
 import { getContractFromId, listContracts } from 'web/lib/firebase/contracts'
 import { LoadingIndicator } from './loading-indicator'
-import { useRouter } from 'next/router'
 import _ from 'lodash'
 import { BetsList } from './bets-list'
 import { Bet } from 'common/bet'
@@ -34,7 +33,10 @@ export function UserLink(props: {
   const { name, username, showUsername, className } = props
 
   return (
-    <SiteLink href={`/${username}`} className={clsx('z-10', className)}>
+    <SiteLink
+      href={`/${username}`}
+      className={clsx('z-10 truncate', className)}
+    >
       {name}
       {showUsername && ` (@${username})`}
     </SiteLink>