From c05e22dc6d2bef3163ac07f6222501bb206ce964 Mon Sep 17 00:00:00 2001
From: chihlasm <michael@chihlas.com>
Date: Thu, 19 Feb 2026 00:23:47 -0500
Subject: [PATCH] style: fix canvas controls visibility and enhance dot grid
 background

- Add !important to all React Flow dark theme overrides to ensure they
  win over library default styles (fixes white controls rectangle)
- Add SVG fill inheritance for control button icons
- Use slightly lighter canvas background (bg-accent/30) so dot grid
  is more visible
- Increase dot size and use muted-foreground color for better contrast

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../src/components/tree-editor/FlowCanvas.tsx |  4 +--
 frontend/src/index.css                        | 31 ++++++++++++-------
 2 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/frontend/src/components/tree-editor/FlowCanvas.tsx b/frontend/src/components/tree-editor/FlowCanvas.tsx
index 30e89afc..c8a9ef0f 100644
--- a/frontend/src/components/tree-editor/FlowCanvas.tsx
+++ b/frontend/src/components/tree-editor/FlowCanvas.tsx
@@ -136,9 +136,9 @@ function FlowCanvasInner({ selectedNodeId, onNodeSelect, onSelectAnswerType }: F
         nodesDraggable={false}
         nodesConnectable={false}
         proOptions={{ hideAttribution: true }}
-        className="bg-background"
+        className="bg-accent/30"
       >
-        <Background variant={BackgroundVariant.Dots} gap={24} size={1} color="hsl(var(--border))" />
+        <Background variant={BackgroundVariant.Dots} gap={20} size={1.5} color="hsl(var(--muted-foreground) / 0.25)" />
         <Controls showInteractive={false} className="!bg-card !border-border !shadow-lg" />
         {minimapVisible && (
           <MiniMap
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 05a11ad4..e521169c 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -318,30 +318,37 @@
 
 /* React Flow dark theme overrides */
 .react-flow__background {
-  background-color: hsl(var(--background));
+  background-color: transparent !important;
 }
 
 .react-flow__controls {
-  background-color: hsl(var(--card));
-  border-color: hsl(var(--border));
-  border-radius: 0.75rem;
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
+  background-color: hsl(var(--card)) !important;
+  border: 1px solid hsl(var(--border)) !important;
+  border-radius: 0.75rem !important;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3) !important;
+  overflow: hidden;
 }
 
 .react-flow__controls-button {
-  background-color: hsl(var(--card));
-  border-color: hsl(var(--border));
-  fill: hsl(var(--muted-foreground));
+  background-color: hsl(var(--card)) !important;
+  border-color: hsl(var(--border)) !important;
+  fill: hsl(var(--muted-foreground)) !important;
+  color: hsl(var(--muted-foreground)) !important;
 }
 
 .react-flow__controls-button:hover {
-  background-color: hsl(var(--accent));
+  background-color: hsl(var(--accent)) !important;
+  fill: hsl(var(--foreground)) !important;
+}
+
+.react-flow__controls-button svg {
+  fill: inherit !important;
 }
 
 .react-flow__minimap {
-  background-color: hsl(var(--card));
-  border-color: hsl(var(--border));
-  border-radius: 0.75rem;
+  background-color: hsl(var(--card)) !important;
+  border: 1px solid hsl(var(--border)) !important;
+  border-radius: 0.75rem !important;
 }
 
 .react-flow__edge-path {