Repository: strapi/strapi
File: packages/plugins/i18n/admin/src/components/LocaleListCell.tsx (TypeScript)

Code before:
        acc.push({ code: locale.code, name });
      }

      return acc;
    }, [])
    .toSorted((a, b) => formatter.compare(a.name, b.name));

  const getDisplayText = () => {
    const displayedLocales = localesForDocument.slice(0, 2);
    const remainingCount = localesForDocument.length - 2;

    const baseText = displayedLocales.map(({ name }) => name).join(', ');

    if (remainingCount <= 0) {
      return baseText;
    }

    const moreText = formatMessage(
      {
        id: getTranslation('CMListView.popover.display-locales.more'),
        defaultMessage: '+ {count} more',
      },
      { count: remainingCount }
    );

    return `${baseText} ${moreText}`;
  };

  const handleLocaleClick = (localeCode: string) => {
    navigate({
      pathname: documentId,
      search: stringify({
        plugins: {
          ...query.plugins,
          i18n: { locale: localeCode },
        },
      }),
    });
  };

  return (
    <Menu.Root>
      <Menu.Trigger>
        <Flex minWidth="100%" alignItems="center" justifyContent="center" fontWeight="regular">
          <Typography textColor="neutral800" ellipsis marginRight={2}>
            {getDisplayText()}
          </Typography>
        </Flex>
      </Menu.Trigger>
      <Menu.Content>
        {localesForDocument.map(({ code, name }) => (

Review comment (suggestion):
I'm wondering if you should format the text this way. If a LTR language is selected, it means that you are forcing a RTL message here. You should probably use a formatMessage only 
```suggestion
    return formatMessage(
      {
        id: getTranslation('CMListView.popover.display-locales.more'),
        defaultMessage: '{locales} + {count} more',
      },
      { locales: baseText, count: remainingCount }
    );
```

This way, you won't have to force any wording.

Code after:
        acc.push({ code: locale.code, name });
      }

      return acc;
    }, [])
    .toSorted((a, b) => formatter.compare(a.name, b.name));

  const getDisplayText = () => {
    const displayedLocales = localesForDocument.slice(0, 2);
    const remainingCount = localesForDocument.length - 2;

    const baseText = displayedLocales.map(({ name }) => name).join(', ');

    if (remainingCount <= 0) {
      return baseText;
    }

    return formatMessage(
      {
        id: getTranslation('CMListView.popover.display-locales.more'),
        defaultMessage: '{locales} + {count} more',
      },
      { locales: baseText, count: remainingCount }
    );
  };

  const handleLocaleClick = (localeCode: string) => {
    navigate({
      pathname: documentId,
      search: stringify({
        plugins: {
          ...query.plugins,
          i18n: { locale: localeCode },
        },
      }),
    });
  };

  return (
    <Menu.Root>
      <Menu.Trigger>
        <Flex minWidth="100%" alignItems="center" justifyContent="center" fontWeight="regular">
          <Typography textColor="neutral800" ellipsis marginRight={2}>
            {getDisplayText()}
          </Typography>
        </Flex>
      </Menu.Trigger>
      <Menu.Content>
        {localesForDocument.map(({ code, name }) => (
          <Menu.Item
            key={code}