From da4f43ead6b8890746ae43318d35759a8a7b58b3 Mon Sep 17 00:00:00 2001 From: ukorvl Date: Tue, 26 Nov 2024 03:39:18 +0400 Subject: [PATCH] add gutter background color to prevent text collision on overflow bug --- src/components/codefield/codeMirrorTheme.ts | 1 - src/components/codefield/defaultStylesOverridesExtension.ts | 5 +++++ src/components/codefield/styles.ts | 3 +++ 3 files changed, 8 insertions(+), 1 deletion(-) diff --git a/src/components/codefield/codeMirrorTheme.ts b/src/components/codefield/codeMirrorTheme.ts index f8238bda..5cf6ac22 100644 --- a/src/components/codefield/codeMirrorTheme.ts +++ b/src/components/codefield/codeMirrorTheme.ts @@ -12,7 +12,6 @@ const defaultSettings = { selectionMatch: COLORS.gray600, fontFamily: "Roboto Mono, monospace", caret: COLORS.gray100, - gutterBackground: "transparent", gutterForeground: COLORS.gray300, } satisfies CreateThemeOptions["settings"]; diff --git a/src/components/codefield/defaultStylesOverridesExtension.ts b/src/components/codefield/defaultStylesOverridesExtension.ts index 4f698fcf..eea90667 100644 --- a/src/components/codefield/defaultStylesOverridesExtension.ts +++ b/src/components/codefield/defaultStylesOverridesExtension.ts @@ -1,5 +1,6 @@ import { EditorView } from "@codemirror/view"; import { COLORS } from "../../shared"; +import { expandProperty } from "inline-style-expand-shorthand"; export const createDefaultStylesOverridesExtension = (showLineNumbers: boolean) => EditorView.theme({ @@ -27,4 +28,8 @@ export const createDefaultStylesOverridesExtension = (showLineNumbers: boolean) ".cm-activeLineGutter": { color: COLORS.gray200, }, + ".cm-gutters": { + backgroundColor: COLORS.gray900, + ...expandProperty("transition", "background 0.15s"), + }, }); diff --git a/src/components/codefield/styles.ts b/src/components/codefield/styles.ts index c32db1fa..199853c9 100644 --- a/src/components/codefield/styles.ts +++ b/src/components/codefield/styles.ts @@ -18,6 +18,9 @@ const getContainerStyles = (size: CODE_FIELD_SIZE, highlightOnHover: boolean): S ...expandProperty("transition", "background 0.15s"), ":hover": { background: COLORS.gray800, + ":first-child .cm-gutters": { + backgroundColor: COLORS.gray800, + }, }, }), fontSize: size === CODE_FIELD_SIZE.small ? "14px" : "16px",