fix: markdownView style

src/components/markdown/index.tsx

@@ -1,13 +1,15 @@
 import {useState} from "react";
 import {IFolderTreeNodeProps} from "@dtinsight/molecule/esm/model";
-import {Pane, SplitPane} from "@dtinsight/molecule/esm/components";
+import {Pane, Scrollable, SplitPane} from "@dtinsight/molecule/esm/components";
 import Editor from "@/components/editor";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
+
 interface IMarkdownViewProps {
     item: IFolderTreeNodeProps
 }
-export const MarkdownView = ({item} :IMarkdownViewProps) => {
+
+export const MarkdownView = ({item}: IMarkdownViewProps) => {
     const [sizes, setSizes] = useState<(number | string)[]>(['50%', '50%'])
     return (
         <div
@@ -16,12 +18,11 @@ export const MarkdownView = ({item} :IMarkdownViewProps) => {
                 minHeight: '400px',
                 height: '100%',
                 width: '100%',
-                margin: '0 0 0 20px'
             }}>
             <SplitPane sizes={sizes} split={'vertical'} allowResize={[false, true]}
                        onChange={sizes => setSizes(sizes)}>
                 <Pane minSize="10%" maxSize="80%">
-                    <div>
+                    <div style={{height: '100%'}}>
                         <Editor
                             language={item.data.language}
                             value={item.data.value}
@@ -31,7 +32,6 @@ export const MarkdownView = ({item} :IMarkdownViewProps) => {
                                 readOnly: true,
                                 wordWrap: 'on',
                                 contextmenu: false,
-                                scrollBeyondLastLine: true,
                                 minimap: {
                                     enabled: false,
                                 },
@@ -40,9 +40,13 @@ export const MarkdownView = ({item} :IMarkdownViewProps) => {
                     </div>
                 </Pane>
                 <Pane minSize="10%" maxSize="80%">
-                    <div>
-                        <ReactMarkdown children={item.data.value} remarkPlugins={[remarkGfm]}/>
+                    <div style={{height: '100%', overflow: 'auto'}}>
+                        <ReactMarkdown
+                            remarkPlugins={[remarkGfm]}>
+                            {item.data.value}
+                        </ReactMarkdown>
                     </div>
+
                 </Pane>
             </SplitPane>
         </div>