Fix: Make Create Relationship dialog more robust and functional

- Changed background from black/90 to gradient gray-900/95 for better visibility
- Added explicit cursor-pointer to all buttons for better UX feedback
- Added e.stopPropagation() to all button clicks to prevent event bubbling
- Added pointer-events-none to all overlay divs to prevent blocking clicks
- Added pointer-events: auto to all interactive buttons explicitly
- Changed border opacity from white/10 to white/20 for better contrast
- Enhanced button hover states with brighter gradients (white/8 to white/20)
- Added active states to buttons (active:scale-100, active states for gradients)
- Increased button padding (py-3.5 px-5) for better clickable area
- Added overflow-y-auto to content area with max-height constraint
- Added inset box-shadow to dialog for depth and polish
- Made all visual overlays non-interactive with pointer-events-none
- Fixed button disabled states with explicit pointer-events handling

Author: Patel230

packages/web/src/components/RelationshipEditorWindow.tsx

@@ -350,14 +350,15 @@ export const RelationshipEditorWindow: React.FC<RelationshipEditorWindowProps> =
       `}</style>
     <div
       ref={windowRef}
-      className="fixed bg-black/90 backdrop-blur-xl border border-white/10 rounded-2xl shadow-2xl overflow-hidden z-[60]"
+      className="fixed bg-gradient-to-br from-gray-900/95 via-slate-900/95 to-gray-900/95 backdrop-blur-2xl border-2 border-white/20 rounded-3xl shadow-2xl overflow-visible z-[60]"
       style={{
         left: `${position.x}px`,
         top: `${position.y}px`,
         width: `${size.width}px`,
         height: `${size.height}px`,
         maxHeight: 'calc(100vh - 20px)',
-        pointerEvents: 'all'
+        pointerEvents: 'all',
+        boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1)'
       }}
       onClick={(e) => e.stopPropagation()}
     >
@@ -393,7 +394,7 @@ export const RelationshipEditorWindow: React.FC<RelationshipEditorWindowProps> =
 
       {/* Content */}
       {isExpanded && (
-        <div className="p-4 space-y-4">
+        <div className="p-4 space-y-4 overflow-y-auto max-h-[calc(100vh-180px)]">
           {/* Status indicator */}
           <div className="text-center space-y-2">
             {!canEdit && (
@@ -515,36 +516,40 @@ export const RelationshipEditorWindow: React.FC<RelationshipEditorWindowProps> =
                   return (
                     <button
                       key={option.type}
-                      onClick={() => handleRelationshipTypeChange(option.type)}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        handleRelationshipTypeChange(option.type);
+                      }}
                       className={`
-                        group relative p-4 rounded-2xl border-2 transition-all duration-300 transform overflow-hidden
-                        hover:scale-110 hover:z-20 hover:-translate-y-1
+                        group relative p-4 rounded-2xl border-2 transition-all duration-300 transform
+                        cursor-pointer hover:scale-110 hover:z-20 hover:-translate-y-1 active:scale-105
                         ${isSelected
                           ? `border-${config.color}-400/70 bg-gradient-to-br ${colors.from} ${colors.via} ${colors.to} shadow-xl ${colors.shadow}`
-                          : 'border-white/10 bg-gradient-to-br from-white/5 via-transparent to-transparent hover:border-white/40 hover:from-white/15 hover:via-white/8 hover:shadow-lg'
+                          : 'border-white/20 bg-gradient-to-br from-white/8 via-white/4 to-transparent hover:border-white/50 hover:from-white/20 hover:via-white/12 hover:shadow-xl'
                         }
                       `}
                       style={{
                         animation: `fadeInScale 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) ${index * 0.04}s both`,
+                        pointerEvents: 'auto',
                         ...(isSelected && {
-                          boxShadow: `0 0 30px ${colors.glow}, 0 10px 25px rgba(0,0,0,0.3)`
+                          boxShadow: `0 0 35px ${colors.glow}, 0 12px 30px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.1)`
                         })
                       }}
                       title={option.description}
                     >
                       {isSelected && (
                         <>
-                          <div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-white/15 via-transparent to-transparent opacity-60 animate-pulse"></div>
-                          <div className="absolute -inset-1 bg-gradient-to-r from-transparent via-white/20 to-transparent animate-shimmer"></div>
+                          <div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-white/20 via-transparent to-transparent opacity-70 animate-pulse pointer-events-none"></div>
+                          <div className="absolute -inset-1 bg-gradient-to-r from-transparent via-white/25 to-transparent animate-shimmer pointer-events-none"></div>
                         </>
                       )}
-                      <div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-white/0 via-white/5 to-white/0 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
-                      <div className="relative flex flex-col items-center space-y-2">
+                      <div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-white/0 via-white/10 to-white/0 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
+                      <div className="relative flex flex-col items-center space-y-2 pointer-events-none">
                         <div className={`transition-all duration-300 ${isSelected ? 'scale-125 drop-shadow-lg' : 'group-hover:scale-125 group-hover:drop-shadow-lg'}`}>
                           {getRelationshipIconElement(option.type, "h-6 w-6")}
                         </div>
                         <span className={`text-[11px] font-bold text-center leading-tight transition-all duration-300 ${
-                          isSelected ? 'text-white drop-shadow-md' : 'text-gray-300 group-hover:text-white group-hover:drop-shadow-md'
+                          isSelected ? 'text-white drop-shadow-md' : 'text-gray-200 group-hover:text-white group-hover:drop-shadow-md'
                         }`}>
                           {option.label}
                         </span>
@@ -558,22 +563,30 @@ export const RelationshipEditorWindow: React.FC<RelationshipEditorWindowProps> =
 
           {/* Actions */}
           {isEditingMode && (
-            <div className="pt-4 border-t border-gradient-to-r from-transparent via-white/10 to-transparent space-y-3">
+            <div className="pt-4 border-t border-white/10 space-y-3">
               <button
-                onClick={handleFlipDirection}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  handleFlipDirection();
+                }}
                 disabled={isFlippingEdge}
-                className="group w-full relative overflow-hidden bg-gradient-to-r from-blue-600/60 via-blue-700/60 to-blue-600/60 hover:from-blue-700/70 hover:via-blue-800/70 hover:to-blue-700/70 text-white py-3 px-4 rounded-xl border-2 border-blue-500/40 hover:border-blue-400/50 flex items-center justify-center space-x-2 font-bold transition-all duration-300 shadow-xl hover:shadow-2xl shadow-blue-500/30 hover:shadow-blue-500/40 disabled:opacity-50 disabled:cursor-not-allowed hover:scale-105 backdrop-blur-sm"
+                className="group w-full relative overflow-hidden cursor-pointer bg-gradient-to-r from-blue-600/70 via-blue-700/70 to-blue-600/70 hover:from-blue-700/80 hover:via-blue-800/80 hover:to-blue-700/80 active:from-blue-800/90 active:via-blue-900/90 active:to-blue-800/90 text-white py-3.5 px-5 rounded-xl border-2 border-blue-400/50 hover:border-blue-300/60 flex items-center justify-center space-x-2 font-bold transition-all duration-300 shadow-xl hover:shadow-2xl shadow-blue-500/40 hover:shadow-blue-400/50 disabled:opacity-50 disabled:cursor-not-allowed hover:scale-105 active:scale-100 backdrop-blur-sm"
+                style={{ pointerEvents: isFlippingEdge ? 'none' : 'auto' }}
               >
-                <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/15 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+                <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
                 <Move className="h-5 w-5 relative z-10" />
                 <span className="relative z-10">{isFlippingEdge ? 'Flipping...' : 'Flip Direction'}</span>
               </button>
 
               <button
-                onClick={handleDeleteEdge}
-                className="group w-full relative overflow-hidden bg-gradient-to-r from-red-600/60 via-red-700/60 to-red-600/60 hover:from-red-700/70 hover:via-red-800/70 hover:to-red-700/70 text-white py-3 px-4 rounded-xl border-2 border-red-500/40 hover:border-red-400/50 flex items-center justify-center space-x-2 font-bold transition-all duration-300 shadow-xl hover:shadow-2xl shadow-red-500/30 hover:shadow-red-500/40 hover:scale-105 backdrop-blur-sm"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  handleDeleteEdge();
+                }}
+                className="group w-full relative overflow-hidden cursor-pointer bg-gradient-to-r from-red-600/70 via-red-700/70 to-red-600/70 hover:from-red-700/80 hover:via-red-800/80 hover:to-red-700/80 active:from-red-800/90 active:via-red-900/90 active:to-red-800/90 text-white py-3.5 px-5 rounded-xl border-2 border-red-400/50 hover:border-red-300/60 flex items-center justify-center space-x-2 font-bold transition-all duration-300 shadow-xl hover:shadow-2xl shadow-red-500/40 hover:shadow-red-400/50 hover:scale-105 active:scale-100 backdrop-blur-sm"
+                style={{ pointerEvents: 'auto' }}
               >
-                <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/15 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+                <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
                 <X className="h-5 w-5 relative z-10" />
                 <span className="relative z-10">Delete Relationship</span>
               </button>
@@ -582,13 +595,17 @@ export const RelationshipEditorWindow: React.FC<RelationshipEditorWindowProps> =
 
           {/* Create mode actions */}
           {!isEditingMode && canEdit && (
-            <div className="pt-4 border-t border-gradient-to-r from-transparent via-white/10 to-transparent space-y-2">
+            <div className="pt-4 border-t border-white/10 space-y-2">
               <button
-                onClick={() => onClearSelection?.()}
-                className="group w-full relative overflow-hidden bg-gradient-to-r from-gray-600/50 via-gray-700/50 to-gray-600/50 hover:from-gray-700/60 hover:via-gray-800/60 hover:to-gray-700/60 text-white py-3 px-4 rounded-xl border-2 border-gray-500/30 hover:border-gray-400/40 flex items-center justify-center space-x-2 font-bold transition-all duration-300 shadow-lg hover:shadow-xl hover:shadow-gray-500/20 hover:scale-105 backdrop-blur-sm"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onClearSelection?.();
+                }}
+                className="group w-full relative overflow-hidden cursor-pointer bg-gradient-to-r from-gray-600/60 via-gray-700/60 to-gray-600/60 hover:from-gray-700/70 hover:via-gray-800/70 hover:to-gray-700/70 active:from-gray-800/80 active:via-gray-900/80 active:to-gray-800/80 text-white py-3.5 px-5 rounded-xl border-2 border-gray-400/40 hover:border-gray-300/50 flex items-center justify-center space-x-2 font-bold transition-all duration-300 shadow-lg hover:shadow-xl hover:shadow-gray-500/30 hover:scale-105 active:scale-100 backdrop-blur-sm"
+                style={{ pointerEvents: 'auto' }}
               >
-                <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
-                <X className="h-4 w-4 relative z-10" />
+                <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/15 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
+                <X className="h-5 w-5 relative z-10" />
                 <span className="relative z-10">Clear Selection</span>
               </button>
             </div>