🪅 add word break (#3326)

* add word break * add word-wrap for title Co-authored-by: Pasha Hliebov <p.hliebov@bsg.world>
Joystream · Jul 22, 2022 · 639fa95 · 639fa95 · vercel · Jul 22, 2022
1 parent 2a055de
commit 639fa95
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 1 deletion.
diff --git a/packages/ui/src/common/components/MarkdownPreview/MarkdownPreviewStyles.tsx b/packages/ui/src/common/components/MarkdownPreview/MarkdownPreviewStyles.tsx
@@ -77,6 +77,7 @@ export const MarkdownPreviewStyles = createGlobalStyle<MarkdownPreviewStylesProp
     line-height: 1.5;
     font-weight: 400;
     color: ${normalColor};
+    word-break: break-word;
   }
 
   .markdown-preview li {

diff --git a/packages/ui/src/council/modals/CandidacyPreview/CandidacyDetails.tsx b/packages/ui/src/council/modals/CandidacyPreview/CandidacyDetails.tsx
@@ -17,7 +17,7 @@ export const CandidacyDetails = ({ candidate }: Props) => {
   return (
     <Details gap={24}>
       <RowGapBlock gap={4}>
-        <h4>{candidate.info.title}</h4>
+        <Title>{candidate.info.title}</Title>
         {candidate.info.bannerUri && <HeaderImage src={candidate.info.bannerUri} />}
       </RowGapBlock>
       <RowGapBlock gap={4}>
@@ -49,3 +49,7 @@ const Details = styled(RowGapBlock)`
 const HeaderImage = styled.img`
   width: 100%;
 `
+
+const Title = styled.h4`
+  word-break: break-word;
+`