Fix group typing bubble less x animation

stylesheets/_modules.scss

@@ -1379,6 +1379,7 @@ $message-padding-horizontal: 12px;
   display: flex;
   justify-content: center;
   margin-inline-end: 8px;
+  min-width: 28px;
   padding-bottom: 6px;
 
   &--with-reactions {
@@ -1447,6 +1448,10 @@ $message-padding-horizontal: 12px;
   }
 }
 
+.module-message__typing-avatar-spacer {
+  flex: 0 1 24px;
+}
+
 .module-message__unopened-gift-badge {
   width: 240px;
   height: 132px;

ts/components/conversation/TypingBubble.stories.tsx

@@ -113,6 +113,29 @@ Group.story = {
   name: 'Group (1 person typing)',
 };
 
+export function GroupStartsTyping(): JSX.Element {
+  const props = createProps({
+    conversationType: 'group',
+    typingContactIdTimestamps: {},
+  });
+  const [afterTimeoutProps, setAfterTimeoutProps] = useState({});
+  useEffect(() => {
+    setTimeout(
+      () =>
+        setAfterTimeoutProps({
+          typingContactIdTimestamps: getTypingContactIdTimestamps(1),
+        }),
+      500
+    );
+  }, []);
+
+  return <TypingBubble {...props} {...afterTimeoutProps} />;
+}
+
+GroupStartsTyping.story = {
+  name: 'Group (0 to 1 person starts typing)',
+};
+
 export function GroupStoppedTyping(): JSX.Element {
   const props = createProps({
     conversationType: 'group',

ts/components/conversation/TypingBubble.tsx

@@ -60,7 +60,7 @@ const AVATAR_ANIMATION_PROPS: Record<'visible' | 'hidden', object> = {
   hidden: {
     opacity: 0.5,
     width: '4px', // Match value of module-message__typing-avatar margin-inline-start
-    x: '14px',
+    x: '12px',
     top: '34px',
   },
 };
@@ -200,6 +200,7 @@ function TypingBubbleGroupAvatars({
   // Avatars are rendered Right-to-Left so the leftmost avatars can render on top.
   return (
     <div className="module-message__author-avatar-container module-message__author-avatar-container--typing">
+      <div className="module-message__typing-avatar-spacer" />
       {typingContactsOverflowCount > 0 && (
         <div
           className="module-message__typing-avatar module-message__typing-avatar--overflow-count