From 2435c984ba539666c3c76a8209d8ece8b5337ad3 Mon Sep 17 00:00:00 2001
From: Jan-Henrik Bruhn <jan-henrik.bruhn@offis.de>
Date: Sat, 11 Oct 2025 12:23:45 +0200
Subject: [PATCH] fix: correct Material-UI icon prop usage in RightPanel
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixed TypeScript build errors by replacing invalid `style` prop with
proper Material-UI icon props. Icon components only accept `fontSize`
and `className` props, not arbitrary style objects.

Changes:
- Move fontSize styling to wrapping div elements
- Use proper `fontSize="small"` prop on icon components
- Apply color styling to container div (unchanged)

This resolves two TypeScript errors at lines 565 and 597 where
`style={{ fontSize: '14px' }}` was incorrectly passed to MUI icons.

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/components/Panels/RightPanel.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Panels/RightPanel.tsx b/src/components/Panels/RightPanel.tsx
index c71bde3..a83cfb0 100644
--- a/src/components/Panels/RightPanel.tsx
+++ b/src/components/Panels/RightPanel.tsx
@@ -561,8 +561,8 @@ const RightPanel = ({ selectedNode, selectedEdge, onClose }: Props) => {
                     return (
                       <>
                         {IconComponent && (
-                          <div className="flex-shrink-0" style={{ color: sourceType?.color }}>
-                            <IconComponent style={{ fontSize: '14px' }} />
+                          <div className="flex-shrink-0" style={{ color: sourceType?.color, fontSize: '14px' }}>
+                            <IconComponent fontSize="small" />
                           </div>
                         )}
                         <span className="font-medium truncate">{sourceNode?.data?.label || currentEdge.source}</span>
@@ -593,8 +593,8 @@ const RightPanel = ({ selectedNode, selectedEdge, onClose }: Props) => {
                         <span className="text-gray-400 text-[10px] flex-shrink-0">({targetType?.label || 'Unknown'})</span>
                         <span className="font-medium truncate">{targetNode?.data?.label || currentEdge.target}</span>
                         {IconComponent && (
-                          <div className="flex-shrink-0" style={{ color: targetType?.color }}>
-                            <IconComponent style={{ fontSize: '14px' }} />
+                          <div className="flex-shrink-0" style={{ color: targetType?.color, fontSize: '14px' }}>
+                            <IconComponent fontSize="small" />
                           </div>
                         )}
                       </>