From f9fbcb337681d38d0a36c312a0b5881d2a636741 Mon Sep 17 00:00:00 2001
From: Djordje Vlaisavljevic <dzvlais@gmail.com>
Date: Tue, 19 Sep 2023 12:58:58 +0100
Subject: [PATCH] Added a hint to try to avoid long descriptions

refs https://github.com/TryGhost/Product/issues/3888
---
 .../site/recommendations/RecommendationReasonForm.tsx        | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/apps/admin-x-settings/src/components/settings/site/recommendations/RecommendationReasonForm.tsx b/apps/admin-x-settings/src/components/settings/site/recommendations/RecommendationReasonForm.tsx
index 490a73132a..64cb49502b 100644
--- a/apps/admin-x-settings/src/components/settings/site/recommendations/RecommendationReasonForm.tsx
+++ b/apps/admin-x-settings/src/components/settings/site/recommendations/RecommendationReasonForm.tsx
@@ -39,7 +39,7 @@ const RecommendationReasonForm: React.FC<Props<EditOrAddRecommendation | Recomme
                 <div className='flex flex-col gap-1'>
                     <div className="flex items-center gap-2">
                         <RecommendationIcon {...formState} />
-                        <span className='text-[1.6rem] font-semibold text-grey-900'>{formState.title}</span>
+                        <span className='line-clamp-1 text-[1.6rem] font-semibold text-grey-900'>{formState.title}</span>
                     </div>
                     {formState.reason && <span className='text-md font-medium leading-snug text-grey-700'>{formState.reason}</span>}
                 </div>
@@ -57,8 +57,9 @@ const RecommendationReasonForm: React.FC<Props<EditOrAddRecommendation | Recomme
         />
         <TextArea
             clearBg={true}
+            hint='Optional, try to keep it under 156 characters'
             rows={3}
-            title="Description (optional)"
+            title="Description"
             value={formState.reason ?? ''}
             onChange={e => updateForm(state => ({...state, reason: e.target.value}))}
         />