fix: added scroll for markdown when it crowded

taskany-inc · Oct 5, 2023 · cddaf94 · cddaf94
1 parent 65862d2
commit cddaf94
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 3 deletions.
diff --git a/src/components/ActivityFeed.tsx b/src/components/ActivityFeed.tsx
@@ -10,7 +10,7 @@ export const ActivityFeed = styled.div`
 
 export const ActivityFeedItem = styled.div`
     display: grid;
-    grid-template-columns: 35px 1fr;
+    grid-template-columns: 35px minmax(0, 1fr);
     column-gap: 15px;
     position: relative;
 

diff --git a/src/components/CommentView/CommentView.tsx b/src/components/CommentView/CommentView.tsx
@@ -114,6 +114,10 @@ const StyledTimestamp = styled.div`
     gap: ${gapS};
 `;
 
+const StyledMd = styled(Md)`
+    overflow-x: auto;
+`;
+
 export const CommentView: FC<CommentViewProps> = ({
     id,
     author,
@@ -269,7 +273,7 @@ export const CommentView: FC<CommentViewProps> = ({
                             </StyledTimestamp>
                         ))}
 
-                        <Md>{commentDescription.description}</Md>
+                        <StyledMd>{commentDescription.description}</StyledMd>
 
                         {nullable(reactions?.length, () => (
                             <Reactions reactions={reactionsProps.reactions} onClick={onReactionToggle} />

diff --git a/src/components/Md.tsx b/src/components/Md.tsx
@@ -5,8 +5,11 @@ import { useMarkdown } from '../hooks/useMarkdown';
 
 interface MdProps {
     children?: string;
+    className?: string;
 }
 
-const Md: React.FC<MdProps> = ({ children = '' }) => <Markdown>{useMarkdown(children)}</Markdown>;
+const Md: React.FC<MdProps> = ({ children = '', className }) => (
+    <Markdown className={className}>{useMarkdown(children)}</Markdown>
+);
 
 export default Md;