From: Dessalines <dessalines@users.noreply.github.com>
Date: Sat, 18 Sep 2021 21:59:20 +0000 (-0400)
Subject: Fix community display name overflow. Fixes #390 (#425)
X-Git-Url: http://these/git/%7BimageUploadUrl%7D?a=commitdiff_plain;h=967b0dd9640a6eadee3f1f7b9776d95e00d515e1;p=lemmy-ui.git

Fix community display name overflow. Fixes #390 (#425)
---

diff --git a/src/assets/css/main.css b/src/assets/css/main.css
index ef6b743..2e6c7cb 100644
--- a/src/assets/css/main.css
+++ b/src/assets/css/main.css
@@ -207,6 +207,10 @@ hr {
   text-overflow: ellipsis;
 }
 
+.overflow-wrap-anywhere {
+  overflow-wrap: anywhere;
+}
+
 #app {
   display: flex;
   flex-direction: column;
diff --git a/src/shared/components/community/community-link.tsx b/src/shared/components/community/community-link.tsx
index 96db808..fee38eb 100644
--- a/src/shared/components/community/community-link.tsx
+++ b/src/shared/components/community/community-link.tsx
@@ -61,7 +61,7 @@ export class CommunityLink extends Component<CommunityLinkProps, any> {
         {!this.props.hideAvatar && community.icon && showAvatars() && (
           <PictrsImage src={community.icon} icon />
         )}
-        <span>{displayName}</span>
+        <span class="overflow-wrap-anywhere">{displayName}</span>
       </>
     );
   }
diff --git a/src/shared/components/community/community.tsx b/src/shared/components/community/community.tsx
index 3ce5f84..e342085 100644
--- a/src/shared/components/community/community.tsx
+++ b/src/shared/components/community/community.tsx
@@ -336,7 +336,7 @@ export class Community extends Component<any, State> {
     return (
       <div class="mb-2">
         <BannerIconHeader banner={community.banner} icon={community.icon} />
-        <h5 class="mb-0">{community.title}</h5>
+        <h5 class="mb-0 overflow-wrap-anywhere">{community.title}</h5>
         <CommunityLink
           community={community}
           realLink