fix

Author: Raubzeug

src/containers/Configs/Configs.scss

@@ -9,7 +9,7 @@
                 --ydb-table-with-controls-layout-controls-height
             ) - var(--configs-padding-bottom)
     );
-
+    max-width: 100%;
     padding-bottom: var(--configs-padding-bottom);
 
     &__feature-flags {
@@ -20,8 +20,6 @@
         --ydb-table-with-controls-layout-controls-height: 44px;
     }
     &__startup {
-        pre {
-            border-radius: 4px;
-        }
+        height: var(--ydb-syntax-highlighter-height);
     }
 }

src/containers/Configs/components/Startup/Startup.tsx

@@ -1,15 +1,29 @@
+import {useThemeValue} from '@gravity-ui/uikit';
+import MonacoEditor from 'react-monaco-editor';
+
 import {ResponseError} from '../../../../components/Errors/ResponseError';
 import {LoaderWrapper} from '../../../../components/LoaderWrapper/LoaderWrapper';
-import {YDBSyntaxHighlighterLazy} from '../../../../components/SyntaxHighlighter/lazy';
 import {configsApi} from '../../../../store/reducers/configs';
 import {useAutoRefreshInterval} from '../../../../utils/hooks/useAutoRefreshInterval';
 
 interface StartupProps {
     database?: string;
     className?: string;
 }
+
+const EDITOR_OPTIONS = {
+    automaticLayout: true,
+    selectOnLineNumbers: true,
+    readOnly: true,
+    minimap: {
+        enabled: false,
+    },
+    wrappingIndent: 'indent' as const,
+};
+
 export function Startup({database, className}: StartupProps) {
     const [autoRefreshInterval] = useAutoRefreshInterval();
+    const theme = useThemeValue();
     const {currentData, isLoading, error} = configsApi.useGetConfigQuery(
         {database},
         {pollingInterval: autoRefreshInterval},
@@ -21,13 +35,14 @@ export function Startup({database, className}: StartupProps) {
         <LoaderWrapper loading={isLoading}>
             {error ? <ResponseError error={error} /> : null}
             {startup ? (
-                <YDBSyntaxHighlighterLazy
-                    className={className}
-                    language="yaml"
-                    text={startup}
-                    transparentBackground={false}
-                    withClipboardButton={{alwaysVisible: true, withLabel: false, size: 'm'}}
-                />
+                <div className={className}>
+                    <MonacoEditor
+                        language={'yaml'}
+                        value={startup}
+                        options={EDITOR_OPTIONS}
+                        theme={`vs-${theme}`}
+                    />
+                </div>
             ) : null}
         </LoaderWrapper>
     );