From 3ef64c8fd0f6753e95b62817d7ccfff95f48caec Mon Sep 17 00:00:00 2001
From: tudi2d <phugenroth@googlemail.com>
Date: Mon, 30 Mar 2020 17:26:07 +0200
Subject: [PATCH 1/3] Limit description length for map pins to 70 characters

---
 src/pages/Maps/Content/View/Popup.tsx                  | 10 +++++++---
 .../Settings/content/formSections/MapPin.section.tsx   |  5 ++++-
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/pages/Maps/Content/View/Popup.tsx b/src/pages/Maps/Content/View/Popup.tsx
index e004699f26..57b324a48d 100644
--- a/src/pages/Maps/Content/View/Popup.tsx
+++ b/src/pages/Maps/Content/View/Popup.tsx
@@ -89,7 +89,11 @@ export class Popup extends React.Component<IProps> {
         ? g.subType === pin.subType && g.type === pin.type
         : g.type === pin.type
     })
-    const { lastActive, heroImageUrl, shortDescription, name } = pin.detail
+    let { lastActive, heroImageUrl, shortDescription, name } = pin.detail
+    const description =
+      shortDescription.length > 70
+        ? shortDescription.substr(0, 70) + '...'
+        : shortDescription
     const lastActiveText = lastActive
       ? distanceInWords(lastActive, new Date())
       : 'a long time'
@@ -116,8 +120,8 @@ export class Popup extends React.Component<IProps> {
               {name}
             </Text>
           </Link>
-          <Text auxiliary small clipped mb={2}>
-            {shortDescription}
+          <Text small mb={2}>
+            {description}
           </Text>
           <LastOnline>last active {lastActiveText} ago</LastOnline>
           {pin.moderation !== 'accepted' && (
diff --git a/src/pages/Settings/content/formSections/MapPin.section.tsx b/src/pages/Settings/content/formSections/MapPin.section.tsx
index 04b37eccce..f40cfedeaa 100644
--- a/src/pages/Settings/content/formSections/MapPin.section.tsx
+++ b/src/pages/Settings/content/formSections/MapPin.section.tsx
@@ -78,12 +78,15 @@ export class UserMapPinSection extends React.Component<IProps, IState> {
         </Flex>
         <Box sx={{ display: isOpen ? 'block' : 'none' }}>
           <Text mb={2} mt={4} medium>
-            Short description of your pin *
+            Short description of your pin (max. 70 characters) *
           </Text>
           <Field
             data-cy="pin-description"
             name="mapPinDescription"
             component={TextAreaField}
+            maxLength="70"
+            style={{ height: 'inherit' }}
+            rows="1"
             placeholder="We are shredding plastic in Plymouth, UK."
             validate={required}
           />

From 39d57aeeeea85a006a042094a4330f09aa8f98c8 Mon Sep 17 00:00:00 2001
From: tudi2d <phugenroth@googlemail.com>
Date: Mon, 30 Mar 2020 17:50:25 +0200
Subject: [PATCH 2/3] Match placeholder with other character limits

---
 src/pages/Settings/content/formSections/MapPin.section.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/Settings/content/formSections/MapPin.section.tsx b/src/pages/Settings/content/formSections/MapPin.section.tsx
index f40cfedeaa..1759a06f05 100644
--- a/src/pages/Settings/content/formSections/MapPin.section.tsx
+++ b/src/pages/Settings/content/formSections/MapPin.section.tsx
@@ -78,7 +78,7 @@ export class UserMapPinSection extends React.Component<IProps, IState> {
         </Flex>
         <Box sx={{ display: isOpen ? 'block' : 'none' }}>
           <Text mb={2} mt={4} medium>
-            Short description of your pin (max. 70 characters) *
+            Short description of your pin*
           </Text>
           <Field
             data-cy="pin-description"
@@ -87,7 +87,7 @@ export class UserMapPinSection extends React.Component<IProps, IState> {
             maxLength="70"
             style={{ height: 'inherit' }}
             rows="1"
-            placeholder="We are shredding plastic in Plymouth, UK."
+            placeholder="Short description of your pin (max 70 characters)"
             validate={required}
           />
           {!initialFormValues.location || editAddress ? (

From d0efb4372092c1d3bf937ef8516f093c75a65c17 Mon Sep 17 00:00:00 2001
From: tudi2d <phugenroth@googlemail.com>
Date: Mon, 30 Mar 2020 18:30:28 +0200
Subject: [PATCH 3/3] Add word break for description text

---
 src/pages/Maps/Content/View/Popup.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/Maps/Content/View/Popup.tsx b/src/pages/Maps/Content/View/Popup.tsx
index 57b324a48d..3eb57bd2d4 100644
--- a/src/pages/Maps/Content/View/Popup.tsx
+++ b/src/pages/Maps/Content/View/Popup.tsx
@@ -89,7 +89,7 @@ export class Popup extends React.Component<IProps> {
         ? g.subType === pin.subType && g.type === pin.type
         : g.type === pin.type
     })
-    let { lastActive, heroImageUrl, shortDescription, name } = pin.detail
+    const { lastActive, heroImageUrl, shortDescription, name } = pin.detail
     const description =
       shortDescription.length > 70
         ? shortDescription.substr(0, 70) + '...'
@@ -120,7 +120,7 @@ export class Popup extends React.Component<IProps> {
               {name}
             </Text>
           </Link>
-          <Text small mb={2}>
+          <Text small mb={2} style={{ wordBreak: 'break-word' }}>
             {description}
           </Text>
           <LastOnline>last active {lastActiveText} ago</LastOnline>