From b36ef545078dd7dbd262e337f2afa9f28cde6c2d Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sun, 9 Nov 2025 13:37:31 +0200
Subject: [PATCH] fix(type_widgets): code background leaking when switching
 types

---
 .../src/widgets/containers/scrolling_container.css       | 9 +++++++++
 .../client/src/widgets/containers/scrolling_container.ts | 4 +---
 apps/client/src/widgets/type_widgets/code/Code.tsx       | 5 +----
 3 files changed, 11 insertions(+), 7 deletions(-)
 create mode 100644 apps/client/src/widgets/containers/scrolling_container.css

diff --git a/apps/client/src/widgets/containers/scrolling_container.css b/apps/client/src/widgets/containers/scrolling_container.css
new file mode 100644
index 000000000..491b8a563
--- /dev/null
+++ b/apps/client/src/widgets/containers/scrolling_container.css
@@ -0,0 +1,9 @@
+.scrolling-container {
+    overflow: auto;
+    scroll-behavior: smooth;
+    position: relative;
+}
+
+.note-split.type-code > .scrolling-container {
+    background-color: var(--code-background-color);
+}
\ No newline at end of file
diff --git a/apps/client/src/widgets/containers/scrolling_container.ts b/apps/client/src/widgets/containers/scrolling_container.ts
index fab51254c..c6b67724f 100644
--- a/apps/client/src/widgets/containers/scrolling_container.ts
+++ b/apps/client/src/widgets/containers/scrolling_container.ts
@@ -2,6 +2,7 @@ import type { CommandListenerData, EventData, EventNames } from "../../component
 import type NoteContext from "../../components/note_context.js";
 import type BasicWidget from "../basic_widget.js";
 import Container from "./container.js";
+import "./scrolling_container.css";
 
 export default class ScrollingContainer extends Container<BasicWidget> {
 
@@ -11,9 +12,6 @@ export default class ScrollingContainer extends Container<BasicWidget> {
         super();
 
         this.class("scrolling-container");
-        this.css("overflow", "auto");
-        this.css("scroll-behavior", "smooth");
-        this.css("position", "relative");
     }
 
     setNoteContextEvent({ noteContext }: EventData<"setNoteContext">) {
diff --git a/apps/client/src/widgets/type_widgets/code/Code.tsx b/apps/client/src/widgets/type_widgets/code/Code.tsx
index 0cbba25ea..0b6558f7b 100644
--- a/apps/client/src/widgets/type_widgets/code/Code.tsx
+++ b/apps/client/src/widgets/type_widgets/code/Code.tsx
@@ -144,10 +144,7 @@ export function CodeEditor({ parentComponent, ntxId, containerRef: externalConta
     const [ backgroundColor, setBackgroundColor ] = useState<string>();
     useEffect(() => {
         if (!backgroundColor || noBackgroundChange) return;
-        parentComponent?.$widget.closest(".scrolling-container").css("background-color", backgroundColor);
-        return () => {
-            parentComponent?.$widget.closest(".scrolling-container").css("background-color", "unset");
-        };
+        parentComponent?.$widget.closest(".scrolling-container").css("--code-background-color", backgroundColor);
     }, [ backgroundColor ]);
 
     // React to theme changes.