From 5ccb0887cb393eab39ffc2e4ff250e803904a037 Mon Sep 17 00:00:00 2001
From: Djordje Vlaisavljevic <dzvlais@gmail.com>
Date: Fri, 20 Oct 2023 14:46:42 +0200
Subject: [PATCH] Added shorter label for button on narrow screens

refs https://github.com/TryGhost/Product/issues/4045
---
 .../src/components/content/RepliesPagination.tsx            | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/apps/comments-ui/src/components/content/RepliesPagination.tsx b/apps/comments-ui/src/components/content/RepliesPagination.tsx
index 5722a7e844..eef3c942d0 100644
--- a/apps/comments-ui/src/components/content/RepliesPagination.tsx
+++ b/apps/comments-ui/src/components/content/RepliesPagination.tsx
@@ -8,12 +8,14 @@ type Props = {
 };
 const RepliesPagination: React.FC<Props> = ({loadMore, count}) => {
     const {t} = useAppContext();
-    const text = count === 1 ? t('Show 1 more reply') : t('Show {{amount}} more replies', {amount: formatNumber(count)});
+    const longText = count === 1 ? t('Show 1 more reply') : t('Show {{amount}} more replies', {amount: formatNumber(count)});
+    const shortText = t('{{amount}} more', {amount: formatNumber(count)});
 
     return (
         <div className="flex w-full items-center justify-start">
             <button className="text-md group mb-10 ml-[48px] flex w-auto items-center px-0 pb-2 pt-0 text-left font-sans font-semibold text-neutral-700 dark:text-white sm:mb-12 " data-testid="reply-pagination-button" type="button" onClick={loadMore}>
-                <span className="flex h-[39px] w-auto items-center justify-center whitespace-nowrap rounded-[6px] bg-[rgba(0,0,0,0.05)] px-4 py-2 text-center font-sans text-sm font-semibold text-neutral-700 outline-0 transition-[opacity,background] duration-150 hover:bg-[rgba(0,0,0,0.1)] dark:bg-[rgba(255,255,255,0.08)] dark:text-neutral-100 dark:hover:bg-[rgba(255,255,255,0.1)]">↓ {text}</span>
+                <span className="flex h-[39px] w-auto items-center justify-center whitespace-nowrap rounded-[6px] bg-[rgba(0,0,0,0.05)] px-4 py-2 text-center font-sans text-sm font-semibold text-neutral-700 outline-0 transition-[opacity,background] duration-150 hover:bg-[rgba(0,0,0,0.1)] dark:bg-[rgba(255,255,255,0.08)] dark:text-neutral-100 dark:hover:bg-[rgba(255,255,255,0.1)]">↓ <span className="ml-1 hidden sm:inline">{longText}</span><span className="ml-1 inline sm:hidden">{shortText}</span>
+                </span>
             </button>
         </div>
     );