From 4e3428f7c49d776a59f0ae72459432236a18dd40 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Krist=C3=B3f=20Marussy?= <marussy@mit.bme.hu>
Date: Sun, 15 Dec 2024 23:19:39 +0100
Subject: [PATCH] fix(frontend): cursor styles and overscroll

---
 subprojects/frontend/src/editor/EditorTheme.ts     | 8 ++++++++
 subprojects/frontend/src/editor/crosshairCursor.ts | 3 ++-
 subprojects/frontend/src/editor/goToDefinition.ts  | 3 ++-
 3 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/subprojects/frontend/src/editor/EditorTheme.ts b/subprojects/frontend/src/editor/EditorTheme.ts
index 5fdb5b2a..e60c6194 100644
--- a/subprojects/frontend/src/editor/EditorTheme.ts
+++ b/subprojects/frontend/src/editor/EditorTheme.ts
@@ -187,6 +187,12 @@ export default styled('div', {
     '.cm-editor:has(> .cm-panels-top) .cm-top-shadow': {
       display: 'none',
     },
+    '.cm-crosshair-cursor': {
+      cursor: 'crosshair',
+    },
+    '.cm-pointer-cursor': {
+      cursor: 'pointer',
+    },
   };
 
   const highlightingStyle: CSSObject = {
@@ -418,6 +424,8 @@ export default styled('div', {
         | CSSObject
         | undefined) ?? {}),
       ...theme.typography.body2,
+      // Appear above the scrollbar (and the splitter handle).
+      zIndex: 2000,
       borderRadius: theme.shape.borderRadius,
       overflow: 'hidden',
       maxWidth: 400,
diff --git a/subprojects/frontend/src/editor/crosshairCursor.ts b/subprojects/frontend/src/editor/crosshairCursor.ts
index 11308997..b1bf0ae6 100644
--- a/subprojects/frontend/src/editor/crosshairCursor.ts
+++ b/subprojects/frontend/src/editor/crosshairCursor.ts
@@ -12,7 +12,8 @@
 import type { Extension } from '@codemirror/state';
 import { EditorView, ViewPlugin } from '@codemirror/view';
 
-const showCrosshair = { style: 'cursor: crosshair' };
+// Do not overwrite `style`, because it would interfere with the overscroll effect.
+const showCrosshair = { class: 'cm-crosshair-cursor' };
 
 /// Returns an extension that turns the pointer cursor into a
 /// crosshair when Shift and Alt are held down together.
diff --git a/subprojects/frontend/src/editor/goToDefinition.ts b/subprojects/frontend/src/editor/goToDefinition.ts
index 2f245e76..8a5c58ba 100644
--- a/subprojects/frontend/src/editor/goToDefinition.ts
+++ b/subprojects/frontend/src/editor/goToDefinition.ts
@@ -12,7 +12,8 @@ import findToken from '../xtext/findToken';
 import type EditorStore from './EditorStore';
 import defineDecorationSetExtension from './defineDecorationSetExtension';
 
-const showPointer = { style: 'cursor: pointer' };
+// Do not overwrite `style`, because it would interfere with the overscroll effect.
+const showPointer = { class: 'cm-pointer-cursor' };
 
 const [setGoToDefinitionDecorations, goToDefinitionDecorations] =
   defineDecorationSetExtension();