diff --git a/__snapshots__/users-header--long-name-truncated.png b/__snapshots__/users-header--long-name-truncated.png
new file mode 100644
index 0000000..59d78b9
Binary files /dev/null and b/__snapshots__/users-header--long-name-truncated.png differ
diff --git a/__snapshots__/users-header.test.js.snap b/__snapshots__/users-header.test.js.snap
index 2678965..0e15932 100644
--- a/__snapshots__/users-header.test.js.snap
+++ b/__snapshots__/users-header.test.js.snap
@@ -117,6 +117,24 @@ exports[`Users/Header loading smoke-test 1`] = `
 </div>
 `;
 
+exports[`Users/Header long name truncated smoke-test 1`] = `
+<div>
+  <div class="my-2 text-md flex items-center">
+    <div class="avatar flex-none">
+      <div class="rounded h-8 w-8">
+        <img class="my-0"
+             src="../test-profile-image.jpg"
+             alt="Really Really Long Lon..."
+        >
+      </div>
+    </div>
+    <div class="pl-3 flex-auto m-auto">
+      Really Really Long Lon...
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Users/Header name and displayName shows name smoke-test 1`] = `
 <div>
   <div class="my-2 text-md flex items-center">
diff --git a/src/lib/components/users/UserHeader.stories.svelte b/src/lib/components/users/UserHeader.stories.svelte
index 865a99d..55749d4 100644
--- a/src/lib/components/users/UserHeader.stories.svelte
+++ b/src/lib/components/users/UserHeader.stories.svelte
@@ -43,6 +43,15 @@
   }}
 />
 
+<Story
+  name="long name truncated"
+  args={{
+    user: {
+      ...vectors.long_name,
+    },
+  }}
+/>
+
 <Story name="loading" args={{ user: { ...vectors.loading } }} />
 
 <Story name="not found" args={{ user: { ...vectors.no_profile } }} />
diff --git a/src/lib/components/users/type.ts b/src/lib/components/users/type.ts
index 874eb04..7da72d3 100644
--- a/src/lib/components/users/type.ts
+++ b/src/lib/components/users/type.ts
@@ -13,16 +13,24 @@ export const defaults: User = {
   npub: '',
 }
 
-export function getName(user: User): string {
-  return user.profile
-    ? user.profile.name
+export function getName(user: User, truncate_above = 25): string {
+  return truncate(
+    user.profile
       ? user.profile.name
-      : user.profile.displayName
-        ? user.profile.displayName
-        : truncateNpub(user.npub)
-    : truncateNpub(user.npub)
+        ? user.profile.name
+        : user.profile.displayName
+          ? user.profile.displayName
+          : truncateNpub(user.npub)
+      : truncateNpub(user.npub),
+    truncate_above
+  )
 }
 
 function truncateNpub(npub: string): string {
   return `${npub.substring(0, 9)}...`
 }
+
+function truncate(s: string, truncate_above = 20): string {
+  if (s.length < truncate_above || truncate_above < 5) return s
+  return `${s.substring(0, truncate_above - 3)}...`
+}
diff --git a/src/lib/components/users/vectors.ts b/src/lib/components/users/vectors.ts
index e516ec7..cbbb0fe 100644
--- a/src/lib/components/users/vectors.ts
+++ b/src/lib/components/users/vectors.ts
@@ -22,6 +22,10 @@ export const UserVectors = {
   } as User,
   no_image: { ...base, profile: { name: 'DanConwayDev' } } as User,
   no_profile: { ...base } as User,
+  long_name: {
+    ...base,
+    profile: { name: 'Really Really Long Long Name', image },
+  } as User,
 }
 
 export function withName(base: User, name: string): User {