Hot fix rationale responsiveness (#4651)

fix Co-authored-by: Theophile Sandoz <[email protected]>
Joystream · Nov 24, 2023 · 3c7dea6 · 3c7dea6 · vercel · Nov 24, 2023
1 parent 1031792
commit 3c7dea6
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 1 deletion.
diff --git a/packages/ui/src/common/components/MarkdownPreview/MarkdownPreviewStyles.tsx b/packages/ui/src/common/components/MarkdownPreview/MarkdownPreviewStyles.tsx
@@ -22,6 +22,10 @@ const normalFontSize = ({ size }: MarkdownPreviewStylesProps) => {
 const normalColor = ({ isReply }: MarkdownPreviewStylesProps) => Colors.Black[isReply ? 800 : 700]
 
 export const MarkdownPreviewStyles = createGlobalStyle<MarkdownPreviewStylesProps>`
+  * {
+    word-break: normal;
+  }
+
   .markdown-preview {
     width: 100%;
   }
@@ -188,7 +192,6 @@ export const MarkdownPreviewStyles = createGlobalStyle<MarkdownPreviewStylesProp
     border-spacing: 0;
     border-collapse: collapse;
     display: block;
-    width: max-content;
     max-width: 100%;
     overflow: auto;
     margin-top: 8px;

diff --git a/packages/ui/src/proposals/components/RationalePreview/RationalePreview.tsx b/packages/ui/src/proposals/components/RationalePreview/RationalePreview.tsx
@@ -33,6 +33,7 @@ const RationaleSection = styled(RowGapBlock).attrs({ gap: 24 })`
   background: ${Colors.Black[50]};
   border: 1px solid ${Colors.Black[200]};
   border-radius: ${BorderRad.s};
+  overflow: auto;
 `
 
 const RationaleToggle = styled.label`