fix(type_widgets): code background leaking when switching types

Author: eliandoran

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);
+}

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">) {

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.