fix: hide diagram toolbars during PDF export (#204)

[rajat12826]

Fixes #204

Description

When exporting a document to PDF via the print layout, UI elements such as the fullscreen and copy icons for Mermaid and other diagrams were unintentionally remaining visible on the generated PDF.

This PR resolves the issue by updating the @media print CSS block in styles.css to hide all diagram-specific toolbars during PDF export, ensuring a clean document without interactive UI artifacts.

Changes Made

• Added diagram toolbar classes (.diagram-toolbar, .mermaid-toolbar, .abc-toolbar, .plantuml-toolbar, .d2-toolbar, .graphviz-toolbar, .stl-toolbar) to the display: none !important; rule within the @media print block.
• Applied minor formatting cleanup to the CSS file for better readability.

[vercel]

@rajat12826 is attempting to deploy a commit to the ThisIs-Developer Team on Vercel.

A member of the Team first needs to authorize it.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
markdown-viwer	Ready	Preview, Comment	Jul 5, 2026 1:40pm

[ThisIs-Developer]

Thanks @rajat12826 for submitting a proposed fix and sorry for the delayed response.

I tested both provided examples and also checked the current behavior, but I was not able to reproduce the issue on my side. The Mermaid controls, such as Fullscreen, Copy, PNG, and SVG, are not appearing in either the PDF preview or the exported PDF for me.

Could you please share the exact reproduction steps, including the Mermaid code? A short screen recording would be especially helpful. That will help me verify the issue properly and review the PR accurately.

[rajat12826]

Screencast.From.2026-07-05.20-10-58.mp4

Thanks for checking!

I've attached a short screen recording showing the issue on my setup. The video demonstrates the reproduction steps and shows that the diagram toolbar icons are included in the exported PDF before applying this fix.

[ThisIs-Developer]

Thank you for the screen recording and for fixing the issue.

I was initially unable to reproduce it in Chrome on Windows. However, after testing again in Chrome on a macOS virtual machine, I was able to see the diagram toolbar icons included in the exported PDF.

This appears to be environment or browser-print-engine-dependent, which explains why it was not visible in my initial testing. I have shared two screenshots for comparison: the first is from Windows Chrome, where the issue does not appear, and the second is from macOS Chrome, where it does.

Thanks again for identifying the cause and providing the fix.

[ThisIs-Developer]

Hi @rajat12826, I have a small request.

I use Windows, so I cannot properly test the app on macOS Safari or Chrome. I used BrowserStack for a quick test, but the session ends after around one minute, so it is difficult to test many features.

Could you please check a few features on macOS, especially in Chrome and Safari?

No pressure at all. If you notice any issue, please let me know. It would help me review and fix it properly.

Thank you again for your help.

[rajat12826]

Thank you!
Yes, sure I will try to test the application in both Chrome and Safari on macOS. If I come across any issues or browser specific behavior, I will definitely let you know and, if possible, submit a fix as well.

Thanks again!