fix: update proposals page to prevent layout crash, handle correct ke…

…y for list item in proposals to prevent page crash, update layout of proposal's description in proposals details page (#98)
CoreumFoundation · May 28, 2024 · a890320 · a890320
1 parent c43edbd
commit a890320
Show file tree

Hide file tree

Showing 7 changed files with 19 additions and 7 deletions.
diff --git a/apps/web-coreum/package.json b/apps/web-coreum/package.json
@@ -1,6 +1,6 @@
 {
   "name": "web-coreum",
-  "version": "2.19.3-105",
+  "version": "2.19.3-106",
   "license": "Apache-2.0",
   "private": true,
   "scripts": {

diff --git a/packages/ui/src/components/markdown/index.tsx b/packages/ui/src/components/markdown/index.tsx
@@ -100,9 +100,13 @@ const options = {
   },
 };
 
-export default function Markdown(props: { markdown: string }) {
+export default function Markdown(props: { markdown: string; className?: string }) {
   const clean = xss(props.markdown.replace(/\\n\s?/g, '<br/>'));
   // clean = clean.replace(/\\n\s?/g, '\n'); // this will also work
 
-  return <ReactMarkdown options={options}>{clean}</ReactMarkdown>;
+  return (
+    <ReactMarkdown options={options} className={props.className}>
+      {clean}
+    </ReactMarkdown>
+  );
 }
diff --git a/packages/ui/src/components/single_proposal/styles.ts b/packages/ui/src/components/single_proposal/styles.ts
@@ -22,6 +22,7 @@ const useStyles = makeStyles()((theme) => ({
   },
   content: {
     marginBottom: theme.spacing(2),
+    wordBreak: 'break-word',
   },
   id: {
     color: theme.palette.custom.fonts.fontThree,

diff --git a/...ges/ui/src/screens/proposal_details/components/overview/__snapshots__/index.test.tsx.snap b/...ges/ui/src/screens/proposal_details/components/overview/__snapshots__/index.test.tsx.snap
@@ -84,6 +84,10 @@ exports[`screen: BlockDetails/Overview matches snapshot 1`] = `
   line-height: 1.5;
 }
 
+.emotion-9 {
+  word-break: break-word;
+}
+
 <div
   className="emotion-0"
   id="Box"
@@ -135,6 +139,7 @@ exports[`screen: BlockDetails/Overview matches snapshot 1`] = `
       description
     </p>
     <div
+      className="value emotion-9"
       id="Markdown"
       markdown="description"
     />

diff --git a/packages/ui/src/screens/proposal_details/components/overview/index.tsx b/packages/ui/src/screens/proposal_details/components/overview/index.tsx
@@ -170,7 +170,7 @@ const Overview: FC<{ className?: string; overview: OverviewType }> = ({ classNam
         <Typography variant="body1" className="label">
           {t('description')}
         </Typography>
-        <Markdown markdown={overview.description} />
+        <Markdown markdown={overview.description} className={cx('value', classes.description)} />
         {extra}
       </div>
     </Box>

diff --git a/packages/ui/src/screens/proposal_details/components/overview/styles.ts b/packages/ui/src/screens/proposal_details/components/overview/styles.ts
@@ -54,6 +54,9 @@ const useStyles = makeStyles()((theme) => ({
       gridTemplateColumns: 'repeat(2, 1fr)',
     },
   },
+  description: {
+    wordBreak: 'break-word',
+  },
 }));
 
 export default useStyles;
diff --git a/packages/ui/src/screens/proposals/components/list/index.tsx b/packages/ui/src/screens/proposals/components/list/index.tsx
@@ -42,8 +42,7 @@ const ListItem: FC<ListItemProps> = ({
   }
 
   const formattedItem = {
-    description:
-      item.description.length > 200 ? `${item.description.slice(0, 200)}...` : item.description,
+    description: item.description,
     status: item.status,
     title: (
       <Link shallow href={PROPOSAL_DETAILS(item.id)} className="value">
@@ -113,7 +112,7 @@ const ProposalsList: FC<ProposalsListProps> = ({
                 >
                   {({ index, style }) => (
                     <ListItem
-                      key={items[index].id}
+                      key={`proposal-list-item-${items[index]?.id}`}
                       index={index}
                       style={style}
                       setRowHeight={setRowHeight}