Fix mermaid edge comments visibility

[kokodak]

What this PR does / why we need it?

This PR fixes mermaid edge comments visibility.

Any background context you want to provide?

What are the relevant tickets?

Fixes #

Checklist

• Added relevant tests or not required
• Didn't break anything

Summary by CodeRabbit

• Style
  • Updated Mermaid diagram colors to a neutral gray palette for nodes, actors and label backgrounds to improve visual consistency.
  • Enhanced edge label styling and layout (backgrounds, text color, sizing and wrapping) for better readability, including adjusted colors for dark theme.

[coderabbitai]

📝 Walkthrough

Walkthrough

This change revises Mermaid SCSS to replace white fills with gray variables across node shapes, actors, and label boxes, and expands edge label styling with a foreignObject container, centered flex layout, and text/reset rules; dark-theme tokens are adjusted to corresponding gray variants.

Changes

Cohort / File(s)	Summary
Mermaid Styling Updates styles/components/_mermaid.scss	Replaced var(--white) with var(--gray-000) (and dark-theme counterparts) for node fills, actor shapes, and label boxes; expanded edgeLabel rules to use foreignObject + flex centering, added .labelBkg, and reset text element styles and colors.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐰 I hopped through styles, swapping white for gray,
Labels wrapped in flex, aligned to stay,
Dark mode tuned with softer night,
Diagrams calm, and colors right,
✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'Fix mermaid edge comments visibility' accurately describes the main change of updating mermaid styling to improve edge label/comment visibility by adjusting colors and layout.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch mermaid-edge-comments

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

styles/components/_mermaid.scss (1)

107-109: ⚠️ Potential issue | 🟠 Major

Missing background-color override for .labelBkg in dark mode.

The light theme sets .labelBkg { background-color: var(--gray-000); } (line 62). This dark-mode block only overrides color but not background-color, so .labelBkg will still render with the light --gray-000 background in dark mode.

Proposed fix

       .labelBkg {
+        background-color: var(--gray-800);
         color: var(--gray-100);
       }

🤖 Fix all issues with AI agents

In `@styles/components/_mermaid.scss`:
- Line 34: Replace the hardcoded color on .edgeLabel with the project CSS color
variable used elsewhere (instead of `#332e2b`) so it follows the theme system, and
add a color override to the dark-theme .edgeLabel rule (the same place .labelBkg
and p are overridden) so all children (including span elements that use color:
inherit) receive the dark-theme text color; update references to .edgeLabel,
.labelBkg, span, and p accordingly to use the variables (e.g., light-theme var
for .edgeLabel and dark-theme var in the dark block).

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@styles/components/_mermaid.scss`:
- Around line 61-64: The .labelBkg class sets background-color: var(--gray-000)
for light theme but the dark-theme rule for .labelBkg (the override currently
only sets color: inherit) never overrides background-color, causing bright
patches inside .edgeLabel in dark mode; update the dark-theme CSS rule that
targets .labelBkg (the same selector used in the dark-mode block that currently
only sets color) to also set background-color to the appropriate dark token
(e.g., var(--gray-900) or the project's dark background variable) so the label
background is consistent in dark mode.

[hackerwins]

Thanks for your contribution.