VoteText: add rules to wrap long links

aragon · Sep 10, 2019 · 7741c3a · 7741c3a
1 parent 4c0e894
commit 7741c3a
Showing 1 changed file with 31 additions and 19 deletions.
diff --git a/apps/voting/app/src/components/VoteText.js b/apps/voting/app/src/components/VoteText.js
@@ -16,25 +16,37 @@ const VoteText = React.memo(
 
     return (
       <TextComponent>
-        {text.split('\n').map((line, i) => (
-          <React.Fragment key={i}>
-            {transformAddresses(line, (part, isAddress, index) =>
-              isAddress ? (
-                <span title={part} key={index}>
-                  {' '}
-                  <LocalIdentityBadge
-                    badgeOnly={disabled}
-                    compact
-                    entity={part}
-                  />{' '}
-                </span>
-              ) : (
-                <span key={index}>{part}</span>
-              )
-            )}
-            <br />
-          </React.Fragment>
-        ))}
+        <span
+          css={`
+            a {
+              word-break: break-all;
+              white-space: normal;
+              text-align: left;
+            }
+          `}
+        >
+          {text.split('\n').map((line, i) => (
+            <React.Fragment key={i}>
+              {transformAddresses(
+                line,
+                (part, isAddress, index) =>
+                  isAddress ? (
+                    <span title={part} key={index}>
+                      {' '}
+                      <LocalIdentityBadge
+                        badgeOnly={disabled}
+                        compact
+                        entity={part}
+                      />{' '}
+                    </span>
+                  ) : (
+                    <span key={index}>{part}</span>
+                  )
+              )}
+              <br />
+            </React.Fragment>
+          ))}
+        </span>
       </TextComponent>
     )
   },