add gutter background color to prevent text collision on overflow bug

NilFoundation · Nov 25, 2024 · da4f43e · da4f43e
1 parent 84267d5
commit da4f43e
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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",