diff --git a/apps/desktop/src/lib/__tests__/editor/currentStatementFrameLayer.spec.ts b/apps/desktop/src/lib/__tests__/editor/currentStatementFrameLayer.spec.ts index 1b912f8d80..be94396f07 100644 --- a/apps/desktop/src/lib/__tests__/editor/currentStatementFrameLayer.spec.ts +++ b/apps/desktop/src/lib/__tests__/editor/currentStatementFrameLayer.spec.ts @@ -1,6 +1,6 @@ import { describe, expect, it, vi } from "vitest"; import { Text } from "@codemirror/state"; -import { currentStatementFrameRect, FRAME_INSET_PX } from "@/lib/editor/codemirrorCurrentStatementFrameLayer"; +import { currentStatementFrameLayer, currentStatementFrameRect, FRAME_INSET_PX } from "@/lib/editor/codemirrorCurrentStatementFrameLayer"; interface CoordRect { left: number; @@ -253,3 +253,14 @@ describe("currentStatementFrameRect", () => { expect(rect!.height).toBe(expectedHeight); }); }); + +describe("currentStatementFrameLayer", () => { + it("renders above line decorations so active-line backgrounds cannot cover the frame", () => { + const layer = vi.fn((config) => config); + const RectangleMarker = vi.fn(); + + currentStatementFrameLayer({ layer, RectangleMarker } as never, () => ({ from: 0, to: 1 })); + + expect(layer).toHaveBeenCalledWith(expect.objectContaining({ above: true, class: "cm-db-currentStatementFrameLayer" })); + }); +}); diff --git a/apps/desktop/src/lib/editor/codemirrorCurrentStatementFrameLayer.ts b/apps/desktop/src/lib/editor/codemirrorCurrentStatementFrameLayer.ts index 7335c3431a..41768baec6 100644 --- a/apps/desktop/src/lib/editor/codemirrorCurrentStatementFrameLayer.ts +++ b/apps/desktop/src/lib/editor/codemirrorCurrentStatementFrameLayer.ts @@ -140,7 +140,9 @@ interface CurrentStatementFrameModule { */ export function currentStatementFrameLayer(viewModule: CurrentStatementFrameModule, resolve: StatementFrameResolver): Extension { return viewModule.layer({ - above: false, + // Keep the outline above line decorations so opaque active-line colors + // from editor themes cannot cover the frame border. + above: true, class: "cm-db-currentStatementFrameLayer", markers(view) { const request = resolve(view);