chore: auto-commit before merge (loop primary)

2026-02-16 15:06:20 +00:00
parent aca57714e4
commit e9a7581aa5
20 changed files with 305 additions and 470 deletions
@@ -16,39 +16,60 @@ export const ConstellationLegend: React.FC<ConstellationLegendProps> = ({ isTouc
  return (
    <div
      style={{
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
        display: 'flex',
-        flexWrap: 'wrap',
-        alignItems: 'center',
-        gap: '12px',
-        padding: '6px 12px',
-        fontFamily: 'var(--font-geist-mono)',
-        fontSize: '10px',
-        color: 'var(--text-tertiary)',
-        lineHeight: '24px',
+        flexDirection: 'column',
+        gap: '2px',
+        padding: '8px 12px',
+        pointerEvents: 'none',
      }}
    >
-      {items.map((item, i) => (
-        <React.Fragment key={item.label}>
-          {i > 0 && (
-            <span style={{ color: 'var(--border)', userSelect: 'none' }} aria-hidden="true">·</span>
-          )}
-          <span style={{ display: 'inline-flex', alignItems: 'center', gap: '5px' }}>
-            <span
-              style={{
-                display: 'inline-block',
-                width: '6px',
-                height: '6px',
-                borderRadius: '50%',
-                backgroundColor: item.color,
-                flexShrink: 0,
-              }}
-            />
-            {item.label}{domainCounts?.[item.domain] != null ? ` (${domainCounts[item.domain]})` : ''}
-          </span>
-        </React.Fragment>
-      ))}
-      <span style={{ color: 'var(--border)', userSelect: 'none' }} aria-hidden="true">·</span>
-      <span style={{ opacity: 0.7 }}>{isTouch || supportsCoarsePointer ? 'Tap to explore connections' : 'Hover to explore connections'}</span>
+      <div
+        style={{
+          fontSize: '12px',
+          fontFamily: 'var(--font-ui)',
+          color: 'var(--text-secondary)',
+          opacity: 1,
+        }}
+      >
+        {isTouch || supportsCoarsePointer ? 'Tap to explore connections' : 'Hover to explore connections'}
+      </div>
+      <div
+        style={{
+          display: 'flex',
+          flexWrap: 'wrap',
+          alignItems: 'center',
+          gap: '12px',
+          fontFamily: 'var(--font-geist-mono)',
+          fontSize: '12px',
+          color: 'var(--text-tertiary)',
+          lineHeight: '24px',
+        }}
+      >
+        {items.map((item, i) => (
+          <React.Fragment key={item.label}>
+            {i > 0 && (
+              <span style={{ color: 'var(--border)', userSelect: 'none' }} aria-hidden="true">·</span>
+            )}
+            <span style={{ display: 'inline-flex', alignItems: 'center', gap: '5px' }}>
+              <span
+                style={{
+                  display: 'inline-block',
+                  width: '6px',
+                  height: '6px',
+                  borderRadius: '50%',
+                  backgroundColor: item.color,
+                  flexShrink: 0,
+                }}
+              />
+              {item.label}{domainCounts?.[item.domain] != null ? ` (${domainCounts[item.domain]})` : ''}
+            </span>
+          </React.Fragment>
+        ))}
+      </div>
    </div>
  )
 }