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

@@ -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.

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>
   ),
 };

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