fix: List description too long breaking styles (decentraland#1887)

BlackBartty · Jun 26, 2023 · dbcc959 · dbcc959
1 parent 7cbd68e
commit dbcc959
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 1 deletion.
diff --git a/webapp/src/components/ListPage/ListPage.module.css b/webapp/src/components/ListPage/ListPage.module.css
@@ -71,6 +71,7 @@
   display: flex;
   flex-direction: column;
   row-gap: 10px;
+  width: 100%;
 }
 
 .subHeaderLeft :global(.Profile.avatar) {
@@ -193,6 +194,10 @@
   margin-top: 20px;
 }
 
+.description {
+  overflow-wrap: break-word;
+}
+
 @media (max-width: 768px) {
   .header:global(.ui.header) {
     margin-left: 16px;

diff --git a/webapp/src/components/ListPage/ListPage.tsx b/webapp/src/components/ListPage/ListPage.tsx
@@ -233,7 +233,7 @@ const ListPage = (props: Props) => {
           </Header>
           <Header className={styles.header} sub>
             <div className={styles.subHeaderLeft}>
-              <span>{list.description}</span>
+              <span className={styles.description}>{list.description}</span>
               {isPublicView && list.userAddress && (
                 <LinkedProfile
                   data-testid={'linked-profile'}