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

diff --git a/src/assets/css/main.css b/src/assets/css/main.css
index ef6b743d3c7f3211b6aa4b424a4920ee556b572e..2e6c7cb39955bf849b5ff0a174518665cdebd945 100644 (file)
--- 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 96db808fb189cb6adb90448e79bb580c1177ce1a..fee38eb2f7d3a9c952f3a9aef6c801b747b4c787 100644 (file)
--- 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 3ce5f848ee3855983ece3079c95a1d3f5b1289f8..e3420855b65d3d5541d66566676c9d1c71f09927 100644 (file)
--- 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