Skip to content

Deep-wiki: mermaid diagrams prevent interaction with modal controls #367

Description

@Kyle-sandeman-mrdfood

I'm no frontend dev but I see z-index:9999 on the .diagram-zoom-overlay but not on the .diagram-zoom-controls:

.diagram-zoom-overlay {
position: fixed;
inset: 0;
z-index: 9999;
background: rgba(0, 0, 0, 0.85);
backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
}

.diagram-zoom-controls {
display: flex;
gap: 8px;
padding: 8px 12px;
background: #161b22;
border-bottom: 1px solid #30363d;
}

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions