From 4e6fefa25dcd5b1634f6b1bb93b45243e203f449 Mon Sep 17 00:00:00 2001
From: Lars Reimann <mail@larsreimann.com>
Date: Fri, 24 Jun 2022 22:04:31 +0200
Subject: [PATCH] fix(gui): bullet point overlapping with "read more/less" icon
 button

---
 .../packageData/selectionView/DocumentationText.tsx   | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/api-editor/gui/src/features/packageData/selectionView/DocumentationText.tsx b/api-editor/gui/src/features/packageData/selectionView/DocumentationText.tsx
index e5bc28a0f..57ef08ba7 100644
--- a/api-editor/gui/src/features/packageData/selectionView/DocumentationText.tsx
+++ b/api-editor/gui/src/features/packageData/selectionView/DocumentationText.tsx
@@ -1,9 +1,9 @@
-import { Code, Flex, HStack, IconButton, Stack, Text } from '@chakra-ui/react';
+import { Code, Flex, HStack, IconButton, Stack, Text as ChakraText, UnorderedList } from '@chakra-ui/react';
 import 'katex/dist/katex.min.css';
 import React, { ClassAttributes, FunctionComponent, HTMLAttributes, useState } from 'react';
 import { FaChevronDown, FaChevronRight } from 'react-icons/fa';
 import ReactMarkdown from 'react-markdown';
-import { CodeComponent, ReactMarkdownProps } from 'react-markdown/lib/ast-to-react';
+import { CodeComponent, ReactMarkdownProps, UnorderedListComponent } from 'react-markdown/lib/ast-to-react';
 import rehypeKatex from 'rehype-katex';
 import remarkGfm from 'remark-gfm';
 import remarkMath from 'remark-math';
@@ -17,16 +17,21 @@ type ParagraphComponent = FunctionComponent<
 >;
 
 const CustomText: ParagraphComponent = function ({ className, children }) {
-    return <Text className={className}>{children}</Text>;
+    return <ChakraText className={className}>{children}</ChakraText>;
 };
 
 const CustomCode: CodeComponent = function ({ className, children }) {
     return <Code className={className}>{children}</Code>;
 };
 
+const CustomUnorderedList: UnorderedListComponent = function ({ className, children }) {
+    return <UnorderedList className={className}>{children}</UnorderedList>;
+};
+
 const components = {
     p: CustomText,
     code: CustomCode,
+    ul: CustomUnorderedList,
 };
 
 export const DocumentationText: React.FC<DocumentationTextProps> = function ({ inputText = '' }) {