fix after review

src/ui/components/MarkdownControl/MarkdownControl.scss

@@ -0,0 +1,5 @@
+.markdown-control {
+    &__textarea {
+        max-height: 40vh;
+    }
+}

src/ui/components/MarkdownControl/MarkdownControl.tsx

@@ -1,11 +1,25 @@
 import React from 'react';
 
 import {TextArea} from '@gravity-ui/uikit';
+import block from 'bem-cn-lite';
 
 import {MarkdownControlProps} from '../../registry/units/common/types/components/MarkdownControl';
 
+import './MarkdownControl.scss';
+
+const b = block('markdown-control');
+
 export const MarkdownControl = (props: MarkdownControlProps) => {
     const {value, onChange, disabled} = props;
 
-    return <TextArea value={value} onUpdate={onChange} hasClear={true} disabled={disabled} />;
+    return (
+        <TextArea
+            className={b()}
+            value={value}
+            onUpdate={onChange}
+            hasClear={true}
+            disabled={disabled}
+            controlProps={{className: b('textarea')}}
+        />
+    );
 };

src/ui/hooks/useMarkdown.tsx

@@ -8,10 +8,16 @@ type Props = {
     value: string;
 };
 
+const MD_COLLECTION_MAX_SIZE = 1000;
 const MarkdownCollection = new Map();
 async function renderMarkdown(value: string) {
     if (!MarkdownCollection.has(value)) {
         try {
+            if (MarkdownCollection.size > MD_COLLECTION_MAX_SIZE) {
+                const firstKey = MarkdownCollection.keys().next().value;
+                MarkdownCollection.delete(firstKey);
+            }
+
             const response = await getSdk().mix.renderMarkdown({text: value, lang: DL.USER_LANG});
             const yfmString = response.result;
             MarkdownCollection.set(value, yfmString);
@@ -25,7 +31,7 @@ async function renderMarkdown(value: string) {
 
 export const useMarkdown = (props: Props) => {
     const {value} = props;
-    const [markdown, setMarkdown] = React.useState<React.ReactNode>('');
+    const [markdown, setMarkdown] = React.useState('');
     const [isLoading, setIsLoading] = React.useState<boolean>(true);
 
     React.useEffect(() => {
@@ -34,10 +40,10 @@ export const useMarkdown = (props: Props) => {
         }
 
         renderMarkdown(value).then((val) => {
-            setMarkdown(<YfmWrapper content={val} setByInnerHtml={true} />);
+            setMarkdown(val);
             setIsLoading(false);
         });
     }, [value]);
 
-    return {markdown, isLoading};
+    return {markdown: <YfmWrapper content={markdown} setByInnerHtml={true} />, isLoading};
 };

src/ui/units/dash/containers/Dialogs/Control2/Sections/AppearanceSection/AppearanceSection.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import {I18n} from 'i18n';
 
 import {Feature} from '../../../../../../../../shared';
-import {Utils} from '../../../../../../../../ui';
+import Utils from '../../../../../../../../ui/utils';
 import {SectionWrapper} from '../../../../../../../components/SectionWrapper/SectionWrapper';
 
 import {HintRow} from './Rows/HintRow/HintRow';