Mermaid diagrams too small on 4K displays

ldraney commented

2026-05-22 11:34:53 +00:00

Owner

Type

Feature

Lineage

Standalone -- discovered during regular use on a 4K display.

Repo

ldraney/mdview

User Story

As a user with a 4K display
I want to view mermaid diagrams at full screen
So that I can read them without zooming the browser

Context

Mermaid diagrams render within the 48rem readable column. On high-DPI / 4K displays this makes the diagrams tiny -- users have to ctrl++ zoom to read them, which zooms the entire page. A fullscreen overlay lets the diagram scale to the viewport independently.

File Targets

Files the agent should modify or create:

app/javascript/controllers/mermaid_controller.js -- add fullscreen button and overlay logic
app/assets/stylesheets/application.css -- styles for button, overlay, and scaled SVG

Files the agent should NOT touch:

app/views/ -- no template changes needed, button is injected via JS

Acceptance Criteria

Each mermaid diagram shows an expand button on hover
Clicking the button opens a fullscreen overlay with the diagram scaled to fill the viewport
Overlay dismisses via Escape key, close button, or clicking the backdrop
Diagram SVG scales properly (strips mermaid's hardcoded width/height)

Test Expectations

Manual: load README.md, verify button appears on diagram hover
Manual: verify fullscreen opens/closes via all three dismiss methods
Manual: verify diagram is readable on 4K without browser zoom

Constraints

Keep it in the existing Stimulus controller, no new dependencies
Overlay uses existing gruvbox theme variables

Checklist

PR opened
Tests pass
No unrelated changes

mdview project

### Type Feature ### Lineage Standalone -- discovered during regular use on a 4K display. ### Repo `ldraney/mdview` ### User Story As a user with a 4K display I want to view mermaid diagrams at full screen So that I can read them without zooming the browser ### Context Mermaid diagrams render within the 48rem readable column. On high-DPI / 4K displays this makes the diagrams tiny -- users have to ctrl++ zoom to read them, which zooms the entire page. A fullscreen overlay lets the diagram scale to the viewport independently. ### File Targets Files the agent should modify or create: - `app/javascript/controllers/mermaid_controller.js` -- add fullscreen button and overlay logic - `app/assets/stylesheets/application.css` -- styles for button, overlay, and scaled SVG Files the agent should NOT touch: - `app/views/` -- no template changes needed, button is injected via JS ### Acceptance Criteria - [ ] Each mermaid diagram shows an expand button on hover - [ ] Clicking the button opens a fullscreen overlay with the diagram scaled to fill the viewport - [ ] Overlay dismisses via Escape key, close button, or clicking the backdrop - [ ] Diagram SVG scales properly (strips mermaid's hardcoded width/height) ### Test Expectations - [ ] Manual: load README.md, verify button appears on diagram hover - [ ] Manual: verify fullscreen opens/closes via all three dismiss methods - [ ] Manual: verify diagram is readable on 4K without browser zoom ### Constraints - Keep it in the existing Stimulus controller, no new dependencies - Overlay uses existing gruvbox theme variables ### Checklist - [x] PR opened - [ ] Tests pass - [ ] No unrelated changes ### Related - mdview project