microsoft / microsoft/skills

Deep-wiki: mermaid diagrams prevent interaction with modal controls

Open Beginner friendly
#367 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
3k
Forks
349
Avg merge
5h
Merged PRs (30d)
20

Description

I'm no frontend dev but I see z-index:9999 on the .diagram-zoom-overlay but not on the .diagram-zoom-controls:
https://github.com/microsoft/skills/blob/5a6104bd49d8fd4e733a30952953fd1cf9f16e62/.github/plugins/deep-wiki/commands/build.md?plain=1#L513-L522
https://github.com/microsoft/skills/blob/5a6104bd49d8fd4e733a30952953fd1cf9f16e62/.github/plugins/deep-wiki/commands/build.md?plain=1#L533-L539

In practice, the SVG of the diagram is above the controls, so if you drag the diagram up (or zoom in) it will cover the controls

Image Copying the z-index directive to the controls seems to fix this but I am unsure if that is the best approach Image

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with .github/plugins/deep-wiki/commands/build.md at the referenced lines 513-522 and 533-539, and inspect the stacking order of .diagram-zoom-overlay, .diagram-zoom-controls, and the Mermaid SVG. Reproduce the problem by dragging or zooming the diagram, then verify that every modal control remains visible and interactive.

Written by the indexing model from the issue text.

Assessment

Tech stack
css
Domain
frontend
Issue type
Bug
Difficulty
1/5
Estimated time
Under an hour
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
72/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.