Override ReactFlow CSS variables for visible edge strokes

[Copilot]

Graph edges were nearly invisible on load due to ReactFlow's default light gray stroke color (#b1b1b7) lacking contrast against light backgrounds.

Changes

• src/index.css: Override ReactFlow CSS variables

  • Light mode: --xy-edge-stroke-default: #111827 (dark stroke, 2px width)
  • Dark mode: --xy-edge-stroke-default: #e5e7eb (light stroke, 2px width)
  • Selected: --xy-edge-stroke-selected-default: #ef4444 (red highlight)

• src/main.jsx: Import index.css to apply overrides

.react-flow {
  --xy-edge-stroke-default: #111827;
  --xy-edge-stroke-width-default: 2;
  --xy-edge-stroke-selected-default: #ef4444;
}

.react-flow.dark {
  --xy-edge-stroke-default: #e5e7eb;
  --xy-edge-stroke-width-default: 2;
  --xy-edge-stroke-selected-default: #ef4444;
}

Screenshots

Before: Edges barely visible

After: Clear edge visibility

Original prompt

when the graph first loads in some themes - the lines cannot be seen

Created from VS Code via the GitHub Pull Request extension.

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[grovesy]

@copilot the dos theme should be fixed width fonts

[Copilot]

@copilot the dos theme should be fixed width fonts

Could you clarify which elements should use fixed-width fonts? I see:

• Concept file viewer already uses fontFamily: 'monospace'
• Table view fields/types use monospace
• UML node fields use monospace

The CSS classes in index.css (.sidebar, .main-content) aren't currently used - the app uses Material-UI components. Should I:

1. Update the MUI theme to use monospace globally?
2. Add monospace to specific components?
3. Something else?