fix(web): fix fold gutter styling

We can't seem to be able to style the fold gutter in the current line to
set its background color, so we set the background of the whole gutter
instead.

2 files changed, 8 insertions, 3 deletions

diff --git a/language-web/src/main/js/editor/EditorParent.ts b/language-web/src/main/js/editor/EditorParent.ts
index ee1323f6..2d74b863 100644
--- a/language-web/src/main/js/editor/EditorParent.ts
+++ b/language-web/src/main/js/editor/EditorParent.ts
@@ -34,6 +34,9 @@ export const EditorParent = styled('div')(({ theme }) => {
     '&, .cm-editor': {
       height: '100%',
     },
+    '.cm-content': {
+      padding: 0,
+    },
     '.cm-scroller, .cm-tooltip-autocomplete, .cm-completionLabel, .cm-completionDetail': {
       fontSize: 16,
       fontFamily: '"JetBrains MonoVariable", "JetBrains Mono", monospace',
@@ -46,7 +49,7 @@ export const EditorParent = styled('div')(({ theme }) => {
       color: theme.palette.text.secondary,
     },
     '.cm-gutters': {
-      background: theme.palette.background.default,
+      background: 'rgba(255, 255, 255, 0.1)',
       color: theme.palette.text.disabled,
       border: 'none',
     },
@@ -57,7 +60,9 @@ export const EditorParent = styled('div')(({ theme }) => {
       background: 'rgba(0, 0, 0, 0.3)',
     },
     '.cm-activeLineGutter': {
-      background: 'rgba(0, 0, 0, 0.3)',
+      background: 'transparent',
+    },
+    '.cm-lineNumbers .cm-activeLineGutter': {
       color: theme.palette.text.primary,
     },
     '.cm-cursor, .cm-cursor-primary': {
diff --git a/language-web/src/main/js/editor/EditorStore.ts b/language-web/src/main/js/editor/EditorStore.ts
index ba31efcb..059233f4 100644
--- a/language-web/src/main/js/editor/EditorStore.ts
+++ b/language-web/src/main/js/editor/EditorStore.ts
@@ -112,8 +112,8 @@ export class EditorStore {
         }),
         semanticHighlighting,
         // We add the gutters to `extensions` in the order we want them to appear.
-        foldGutter(),
         lineNumbers(),
+        foldGutter(),
         keymap.of([
           ...closeBracketsKeymap,
           ...commentKeymap,