From 178292435fb967772a3693f3bd956d64df409540 Mon Sep 17 00:00:00 2001
From: Jan-Henrik Bruhn <jan-henrik.bruhn@offis.de>
Date: Mon, 20 Oct 2025 15:23:01 +0200
Subject: [PATCH] feat: apply custom background colors to maximized groups
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Maximized groups now display their assigned background color instead
of using the hardcoded default gray color.

Changes:

GroupNode.tsx:
- Added background color overlay div in maximized state
- Uses data.color property (same as minimized groups)
- Positioned absolutely to fill entire group area
- Set pointerEvents: 'none' to allow interaction with children

index.css:
- Changed .react-flow__node-group background to transparent
- Changed .react-flow__node-group.selected background to transparent
- Inner div now controls the background color

This ensures visual consistency between minimized and maximized
groups - both now respect the user-selected color from the group
properties panel.

Benefits:
- ✅ Visual consistency between group states
- ✅ User-selected colors are always visible
- ✅ Better visual organization with color-coded groups
- ✅ Matches user expectations for group appearance

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/components/Nodes/GroupNode.tsx | 14 ++++++++++++++
 src/styles/index.css               |  4 ++--
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/components/Nodes/GroupNode.tsx b/src/components/Nodes/GroupNode.tsx
index f9917b4..9500f9d 100644
--- a/src/components/Nodes/GroupNode.tsx
+++ b/src/components/Nodes/GroupNode.tsx
@@ -220,6 +220,20 @@ const GroupNode = ({ id, data, selected }: NodeProps<Group>) => {
         position: 'relative',
       }}
     >
+      {/* Background color overlay - uses group's custom color */}
+      <div
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          backgroundColor: data.color || 'rgba(240, 242, 245, 0.5)',
+          borderRadius: '8px',
+          pointerEvents: 'none', // Let clicks pass through to children
+        }}
+      />
+
       {/* Resize handles - only visible when selected */}
       <NodeResizer
         isVisible={selected}
diff --git a/src/styles/index.css b/src/styles/index.css
index 7047c00..9f80430 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -46,14 +46,14 @@ code {
 
 /* Group node styling - React Flow native */
 .react-flow__node-group {
-  background-color: rgba(240, 242, 245, 0.5);
+  background-color: transparent; /* Background handled by inner div for custom colors */
   border: 2px dashed rgba(100, 116, 139, 0.4);
   border-radius: 8px;
   padding: 10px; /* Default padding for maximized groups */
 }
 
 .react-flow__node-group.selected {
-  background-color: rgba(219, 234, 254, 0.5);
+  background-color: transparent; /* Background handled by inner div for custom colors */
   border: 2px solid rgba(59, 130, 246, 0.6);
 }