From 719d772743684acbf2f4762006dabbad3977b568 Mon Sep 17 00:00:00 2001
From: Johan Persson <johanopersson@gmail.com>
Date: Tue, 4 Nov 2025 11:44:46 +0100
Subject: [PATCH] fix(ui): display single initial for x-small and small Avatar
 sizes

Avatar components in x-small and small sizes now display only
one initial instead of two, improving readability at smaller
dimensions.

Updated the Storybook story to demonstrate both image-based and
initial-based avatars across all size variants.

Signed-off-by: Johan Persson <johanopersson@gmail.com>
---
 .changeset/long-humans-sink.md                |  5 +++++
 .../src/components/Avatar/Avatar.stories.tsx  | 21 +++++++++++++------
 packages/ui/src/components/Avatar/Avatar.tsx  |  6 +++++-
 3 files changed, 25 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/long-humans-sink.md

diff --git a/.changeset/long-humans-sink.md b/.changeset/long-humans-sink.md
new file mode 100644
index 0000000000..9959caf1b1
--- /dev/null
+++ b/.changeset/long-humans-sink.md
@@ -0,0 +1,5 @@
+---
+'@backstage/ui': patch
+---
+
+Avatar components in x-small and small sizes now display only one initial instead of two, improving readability at smaller dimensions.
diff --git a/packages/ui/src/components/Avatar/Avatar.stories.tsx b/packages/ui/src/components/Avatar/Avatar.stories.tsx
index 2ad51e4a5d..582d82393e 100644
--- a/packages/ui/src/components/Avatar/Avatar.stories.tsx
+++ b/packages/ui/src/components/Avatar/Avatar.stories.tsx
@@ -45,12 +45,21 @@ export const Sizes: Story = {
     ...Default.args,
   },
   render: args => (
-    <Flex>
-      <Avatar {...args} size="x-small" />
-      <Avatar {...args} size="small" />
-      <Avatar {...args} size="medium" />
-      <Avatar {...args} size="large" />
-      <Avatar {...args} size="x-large" />
+    <Flex direction="column" gap="6">
+      <Flex>
+        <Avatar {...args} size="x-small" />
+        <Avatar {...args} size="small" />
+        <Avatar {...args} size="medium" />
+        <Avatar {...args} size="large" />
+        <Avatar {...args} size="x-large" />
+      </Flex>
+      <Flex>
+        <Avatar {...args} size="x-small" src="" />
+        <Avatar {...args} size="small" src="" />
+        <Avatar {...args} size="medium" src="" />
+        <Avatar {...args} size="large" src="" />
+        <Avatar {...args} size="x-large" src="" />
+      </Flex>
     </Flex>
   ),
 };
diff --git a/packages/ui/src/components/Avatar/Avatar.tsx b/packages/ui/src/components/Avatar/Avatar.tsx
index 1490d86098..7cbb4f80c7 100644
--- a/packages/ui/src/components/Avatar/Avatar.tsx
+++ b/packages/ui/src/components/Avatar/Avatar.tsx
@@ -47,12 +47,16 @@ export const Avatar = forwardRef<HTMLDivElement, AvatarProps>((props, ref) => {
     };
   }, [src]);
 
+  const initialsCount = ['x-small', 'small'].includes(cleanedProps.size)
+    ? 1
+    : 2;
+
   const initials = name
     .split(' ')
     .map(word => word[0])
     .join('')
     .toLocaleUpperCase('en-US')
-    .slice(0, 2);
+    .slice(0, initialsCount);
 
   return (
     <div