diff --git a/.gitignore b/.gitignore
index c8e1638..390cec4 100644
--- a/.gitignore
+++ b/.gitignore
@@ -71,3 +71,6 @@ eval_runs/
 # Top-level scratch / eval result dumps
 /*.txt
 dist-landing
+
+#NixOS
+.nix-gsettings-schemas/
diff --git a/flake.lock b/flake.lock
new file mode 100644
index 0000000..a0d2721
--- /dev/null
+++ b/flake.lock
@@ -0,0 +1,48 @@
+{
+  "nodes": {
+    "nixpkgs": {
+      "locked": {
+        "lastModified": 1781074563,
+        "narHash": "sha256-md8WlXOlfnIeHeOScMTTHFyf2d6iaTwPl2apR5EQ3P4=",
+        "owner": "NixOS",
+        "repo": "nixpkgs",
+        "rev": "9ae611a455b90cf061d8f332b977e387bda8e1ca",
+        "type": "github"
+      },
+      "original": {
+        "owner": "NixOS",
+        "ref": "nixos-unstable",
+        "repo": "nixpkgs",
+        "type": "github"
+      }
+    },
+    "root": {
+      "inputs": {
+        "nixpkgs": "nixpkgs",
+        "rust-overlay": "rust-overlay"
+      }
+    },
+    "rust-overlay": {
+      "inputs": {
+        "nixpkgs": [
+          "nixpkgs"
+        ]
+      },
+      "locked": {
+        "lastModified": 1781580018,
+        "narHash": "sha256-BlTedbM77FmesD2ZqR73vhFy+y77UrhefV7IYw1pDsk=",
+        "owner": "oxalica",
+        "repo": "rust-overlay",
+        "rev": "8bceba21a1ebea535c27c4dc723a0d5a4db9e386",
+        "type": "github"
+      },
+      "original": {
+        "owner": "oxalica",
+        "repo": "rust-overlay",
+        "type": "github"
+      }
+    }
+  },
+  "root": "root",
+  "version": 7
+}
diff --git a/src/components/Canvas/nodes/codeNode/CodeNodeHeader.tsx b/src/components/Canvas/nodes/codeNode/CodeNodeHeader.tsx
index 64d7473..839307a 100644
--- a/src/components/Canvas/nodes/codeNode/CodeNodeHeader.tsx
+++ b/src/components/Canvas/nodes/codeNode/CodeNodeHeader.tsx
@@ -1,3 +1,5 @@
+import { memo } from 'react'
+
 interface CodeNodeHeaderProps {
   displayPath: string
   dirPrefix: string
@@ -20,7 +22,7 @@ interface CodeNodeHeaderProps {
   onToggleUnlocked: () => void
 }
 
-const badge = 'text-[10px] px-1.5 py-0.5 rounded font-mono'
+const badge = 'h-5 px-1.5 rounded font-mono text-[10px] leading-5'
 const toggleBtn = (active: boolean) =>
   `${badge} cursor-pointer transition-colors ${
     active ? 'bg-primary/20 text-primary' : 'bg-muted text-muted-foreground hover:text-foreground'
@@ -28,7 +30,7 @@ const toggleBtn = (active: boolean) =>
 
 /** Title bar for a CodeNode: file path, status badges (commit / new / modified /
  *  editing) and the markdown-preview and line-wrap toggles. Purely presentational. */
-export function CodeNodeHeader({
+export const CodeNodeHeader = memo(function CodeNodeHeader({
   displayPath,
   dirPrefix,
   fileName,
@@ -49,14 +51,26 @@ export function CodeNodeHeader({
   onToggleUnlocked,
 }: CodeNodeHeaderProps) {
   return (
-    <div className="flex items-center justify-between px-3 py-1.5 border-b border-border/50 bg-muted/30">
-      <div className="flex items-center gap-2 min-w-0">
-        <span className="text-xs font-medium truncate" title={displayPath}>
+    <div
+      className="relative z-10 flex h-8 min-h-8 max-h-8 shrink-0 items-center overflow-hidden px-3 border-b border-border/50 bg-background"
+      style={{
+        backfaceVisibility: 'hidden',
+        contain: 'layout paint style',
+        isolation: 'isolate',
+        transform: 'translateZ(0)',
+        willChange: 'transform',
+      }}
+    >
+      <div className="flex flex-1 items-center gap-2 min-w-0 overflow-hidden">
+        <span
+          className="block min-w-0 max-w-full text-xs leading-4 font-medium truncate"
+          title={displayPath}
+        >
           {dirPrefix && <span className="text-foreground/40">{dirPrefix}</span>}
           <span className="text-foreground">{fileName}</span>
         </span>
       </div>
-      <div className="flex items-center gap-1.5 shrink-0">
+      <div className="ml-2 flex items-center gap-1.5 shrink-0 overflow-hidden">
         {isMd && (
           <button type="button" onClick={onToggleMdPreview} className={toggleBtn(mdPreview)}>
             {mdPreview ? 'preview' : 'source'}
@@ -99,4 +113,4 @@ export function CodeNodeHeader({
       </div>
     </div>
   )
-}
+})
diff --git a/src/components/Canvas/nodes/codeNode/editorTheme.ts b/src/components/Canvas/nodes/codeNode/editorTheme.ts
index 645e8ac..eb62c89 100644
--- a/src/components/Canvas/nodes/codeNode/editorTheme.ts
+++ b/src/components/Canvas/nodes/codeNode/editorTheme.ts
@@ -10,6 +10,8 @@ export const codeEditorTheme = EditorView.theme({
     maxHeight: `calc(100vh - ${CODE_NODE_HEIGHT_RESERVED}px)`,
   },
   '.cm-scroller': {
+    backgroundColor: 'var(--color-background)',
+    backfaceVisibility: 'hidden',
     fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
     // Cap the height on the scroll container itself, not just on `&`
     // (.cm-editor). The scroller inherits `height: 100%` from CodeMirror's base
@@ -22,6 +24,7 @@ export const codeEditorTheme = EditorView.theme({
     // internal scroll reliable on every WebView.
     maxHeight: `calc(100vh - ${CODE_NODE_HEIGHT_RESERVED}px)`,
     overflowY: 'auto',
+    overflowAnchor: 'none',
     overscrollBehavior: 'contain',
     scrollbarWidth: 'none',
     '&::-webkit-scrollbar': { display: 'none' },