From 4c2d03fce32b6b56064172e55630322a87aa08d5 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Sun, 10 Aug 2025 06:09:28 +0000
Subject: [PATCH] Refine edge labels and layout

Improve edge label readability by using red outlines for negated conditions and rounded rectangles for specific conditions. Adjust graph layout to occupy full width for better scaling.
---
 src/components/DogsBunnyPuzzle.tsx | 97 ++++++++++++++++++------------
 1 file changed, 57 insertions(+), 40 deletions(-)

diff --git a/src/components/DogsBunnyPuzzle.tsx b/src/components/DogsBunnyPuzzle.tsx
index 3988413..9422319 100644
--- a/src/components/DogsBunnyPuzzle.tsx
+++ b/src/components/DogsBunnyPuzzle.tsx
@@ -344,8 +344,8 @@ const DogsBunnyPuzzle: React.FC<DogsBunnyPuzzleProps> = ({
             <div className="flex-1">
               <div 
                 id="puzzle-area"
-                className="relative bg-muted/10 rounded-lg p-6 min-h-[500px]"
-                style={{ width: '500px', height: '400px' }}
+                className="relative bg-muted/10 rounded-lg p-6 min-h-[500px] w-full"
+                style={{ height: '400px' }}
               >
                 {/* Edges */}
                 <svg className="absolute inset-0 w-full h-full pointer-events-none">
@@ -369,50 +369,67 @@ const DogsBunnyPuzzle: React.FC<DogsBunnyPuzzleProps> = ({
                           strokeWidth={isValid ? "3" : "1"}
                           strokeDasharray={isValid ? "none" : "5,5"}
                         />
-                        {/* Condition icons */}
-                        {edge.conditions.slice(0, 2).map((condition, condIndex) => (
-                          <g key={condIndex}>
+                        {/* Condition labels */}
+                        {edge.conditions.length === 1 ? (
+                          // Single condition - use circle with red outline for negated
+                          <g>
                             <circle
-                              cx={(fromLoc.x + toLoc.x) / 2 + 20 + (condIndex - 0.5) * 16}
+                              cx={(fromLoc.x + toLoc.x) / 2 + 20}
                               cy={(fromLoc.y + toLoc.y) / 2 + 20}
-                              r="8"
+                              r="10"
+                              fill="hsl(var(--background))"
+                              stroke={edge.conditions[0].includes('NOBODY') ? "#ef4444" : "hsl(var(--border))"}
+                              strokeWidth="2"
+                            />
+                            <text
+                              x={(fromLoc.x + toLoc.x) / 2 + 20}
+                              y={(fromLoc.y + toLoc.y) / 2 + 25}
+                              fontSize="12"
+                              textAnchor="middle"
+                              className="pointer-events-none"
+                            >
+                              {getConditionIcon(edge.conditions[0])}
+                            </text>
+                            <title>{formatCondition(edge.conditions[0])}</title>
+                          </g>
+                        ) : (
+                          // Multiple conditions - use rounded rectangle
+                          <g>
+                            <rect
+                              x={(fromLoc.x + toLoc.x) / 2 + 20 - (edge.conditions.length * 6)}
+                              y={(fromLoc.y + toLoc.y) / 2 + 10}
+                              width={edge.conditions.length * 12}
+                              height="20"
+                              rx="10"
                               fill="hsl(var(--background))"
                               stroke="hsl(var(--border))"
                               strokeWidth="1"
                             />
-                            <text
-                              x={(fromLoc.x + toLoc.x) / 2 + 20 + (condIndex - 0.5) * 16}
-                              y={(fromLoc.y + toLoc.y) / 2 + 25}
-                              fontSize="10"
-                              textAnchor="middle"
-                              className="pointer-events-none"
-                            >
-                              {condition.includes('NOBODY') ? '❌' : ''}
-                              {getConditionIcon(condition)}
-                            </text>
-                            <title>{formatCondition(condition)}</title>
-                          </g>
-                        ))}
-                        {edge.conditions.length > 2 && (
-                          <g>
-                            <circle
-                              cx={(fromLoc.x + toLoc.x) / 2 + 20 + 16}
-                              cy={(fromLoc.y + toLoc.y) / 2 + 20}
-                              r="6"
-                              fill="hsl(var(--muted))"
-                              stroke="hsl(var(--border))"
-                              strokeWidth="1"
-                            />
-                            <text
-                              x={(fromLoc.x + toLoc.x) / 2 + 20 + 16}
-                              y={(fromLoc.y + toLoc.y) / 2 + 24}
-                              fontSize="8"
-                              textAnchor="middle"
-                              className="pointer-events-none"
-                            >
-                              +{edge.conditions.length - 2}
-                            </text>
-                            <title>{edge.conditions.slice(2).map(formatCondition).join(', ')}</title>
+                            {edge.conditions.slice(0, 3).map((condition, condIndex) => (
+                              <text
+                                key={condIndex}
+                                x={(fromLoc.x + toLoc.x) / 2 + 20 - (edge.conditions.length * 6) + 6 + (condIndex * 12)}
+                                y={(fromLoc.y + toLoc.y) / 2 + 25}
+                                fontSize="10"
+                                textAnchor="middle"
+                                className="pointer-events-none"
+                                fill={condition.includes('NOBODY') ? "#ef4444" : "currentColor"}
+                              >
+                                {getConditionIcon(condition)}
+                              </text>
+                            ))}
+                            {edge.conditions.length > 3 && (
+                              <text
+                                x={(fromLoc.x + toLoc.x) / 2 + 20 + (edge.conditions.length * 6) - 6}
+                                y={(fromLoc.y + toLoc.y) / 2 + 25}
+                                fontSize="8"
+                                textAnchor="middle"
+                                className="pointer-events-none"
+                              >
+                                +{edge.conditions.length - 3}
+                              </text>
+                            )}
+                            <title>{edge.conditions.map(formatCondition).join(', ')}</title>
                           </g>
                         )}
                       </g>