feat(MapNode): add viewBoxWidth prop for scaling and adjust text rendering for fixed visual size

frontend/src/components/MapNode.tsx

@@ -20,6 +20,7 @@ interface MapNodeProps {
   kills?: number;
   showJumps?: boolean;
   showKills?: boolean;
+  viewBoxWidth?: number; // Add viewBox width for scaling calculations
 }
 
 export const MapNode: React.FC<MapNodeProps> = ({
@@ -41,6 +42,7 @@ export const MapNode: React.FC<MapNodeProps> = ({
   kills,
   showJumps = false,
   showKills = false,
+  viewBoxWidth = 1200,
 }) => {
   const [isHovered, setIsHovered] = useState(false);
   const [isDragging, setIsDragging] = useState(false);
@@ -185,7 +187,7 @@ export const MapNode: React.FC<MapNodeProps> = ({
           className="transition-all duration-300"
         />
 
-        {/* Node label */}
+        {/* Node label - fixed visual size regardless of zoom */}
         <text
           x="0"
           y={textOffset}
@@ -195,7 +197,12 @@ export const MapNode: React.FC<MapNodeProps> = ({
           fontWeight="bold"
           className={`transition-all duration-300 ${isHovered ? 'fill-purple-200' : 'fill-white'
             } pointer-events-none select-none`}
-          style={{ textShadow: '2px 2px 4px rgba(0,0,0,0.8)' }}
+          style={{ 
+            textShadow: '2px 2px 4px rgba(0,0,0,0.8)',
+            vectorEffect: 'non-scaling-stroke'
+          }}
+          transform={`scale(${1 / (1200 / viewBoxWidth)})`}
+          transformOrigin="0 0"
         >
           {name} {security !== undefined && (
             <tspan fill={getSecurityColor(security)}>{security.toFixed(1)}</tspan>
@@ -208,12 +215,17 @@ export const MapNode: React.FC<MapNodeProps> = ({
           fill="#a3a3a3"
           fontSize="12"
           className="pointer-events-none select-none"
-          style={{ textShadow: '1px 1px 2px rgba(0,0,0,0.8)' }}
+          style={{ 
+            textShadow: '1px 1px 2px rgba(0,0,0,0.8)',
+            vectorEffect: 'non-scaling-stroke'
+          }}
+          transform={`scale(${1 / (1200 / viewBoxWidth)})`}
+          transformOrigin="0 0"
         >
           {signatures !== undefined && signatures > 0 && `📡 ${signatures}`}
         </text>
         
-        {/* Statistics display */}
+        {/* Statistics display - fixed visual size regardless of zoom */}
         {showJumps && jumps !== undefined && (
           <text
             x="0"
@@ -222,7 +234,12 @@ export const MapNode: React.FC<MapNodeProps> = ({
             fill="#60a5fa"
             fontSize="10"
             className="pointer-events-none select-none"
-            style={{ textShadow: '1px 1px 2px rgba(0,0,0,0.8)' }}
+            style={{ 
+              textShadow: '1px 1px 2px rgba(0,0,0,0.8)',
+              vectorEffect: 'non-scaling-stroke'
+            }}
+            transform={`scale(${1 / (1200 / viewBoxWidth)})`}
+            transformOrigin="0 0"
           >
             🚀 {jumps}
           </text>
@@ -236,7 +253,12 @@ export const MapNode: React.FC<MapNodeProps> = ({
             fill="#f87171"
             fontSize="10"
             className="pointer-events-none select-none"
-            style={{ textShadow: '1px 1px 2px rgba(0,0,0,0.8)' }}
+            style={{ 
+              textShadow: '1px 1px 2px rgba(0,0,0,0.8)',
+              vectorEffect: 'non-scaling-stroke'
+            }}
+            transform={`scale(${1 / (1200 / viewBoxWidth)})`}
+            transformOrigin="0 0"
           >
             ⚔️ {kills}
           </text>

frontend/src/components/RegionMap.tsx

@@ -1088,6 +1088,7 @@ export const RegionMap = ({ regionName, focusSystem, isCompact = false, isWormho
             kills={getSystemKills(system.solarSystemName)}
             showJumps={showJumps}
             showKills={showKills}
+            viewBoxWidth={viewBox.width}
           />
         ))}