[Bug]: Images overlaps on Issue page description

[alexanmtz]

Contact Details

issues@gitpay.me

What happened?

As you can see on the Screenshot, big images overlap the content of the description

To run the project locally, you can follow your README: https://github.com/worknenjoy/gitpay?tab=readme-ov-file#readme

Steps to reproduce

• Follow our README to run the project locally
• Register a user
• Import an issue with images
• You will see the issue created with overlaping images

What browsers are you seeing the problem on?

Chrome

Relevant log output

We use Marked and Parse to render the description.
https://www.npmjs.com/package/marked
https://www.npmjs.com/package/parse

Feel free to replace the library with something that handles high-resolution images better.

💰 Is there a bounty for this issue?

No

💵 Bounty Amount (if any)

No bounty for this one

📜 Bounty Details (if applicable)

There's no Bounty for this issue.

This issue is part of the Only Dust Hackathon: https://onlydust.notion.site/May-28th-Open-Source-Hackathon-1f244b682a80801890e5fda15b779746

[dosubot]

The image overlap issue on the issue page description is likely caused by the CSS rule in frontend/src/main/app.css that sets both the width and height of images inside .MuiTypography-body2 to 100%. This can cause large images to overflow or overlap content if their container does not have explicit size constraints or if the image aspect ratio is not preserved [source].

To resolve this, you can update the CSS to ensure images scale responsively and do not exceed the width of their container. Here’s a suggested fix:

.MuiTypography-body2 img,
.MuiTypography-body1 img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 16px 0;
}

• max-width: 100% ensures images never exceed the width of their container.
• height: auto preserves the aspect ratio.
• display: block and margin help with spacing and prevent inline overlap.

You may also want to apply this rule to .MuiTypography-body1 img since the description is rendered inside a Typography component with the body1 variant [source].

No changes to the Marked or Parse libraries are strictly necessary for this CSS-based fix. However, if you continue to experience issues with high-resolution images, you could consider libraries like react-markdown which offer more control over rendering, but this is optional.

No existing tickets or discussions were found related to this specific issue. Let me know if you need more detailed guidance on where to place the CSS or how to test the fix.

To continue talking to Dosu, mention @dosu-bot.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Bug Report | Other}

[stephanniegb]

I have 3+ year of experience building front end applications and would love to help with this issue as I have a solid background in styling webpages

[pheobeayo]

I am a Web3 frontend developer.

My Approach:

• Run the project locally
• View the overlapping images
• apply the right spacing and styling
• create a PR

[perpetual-cosmos]

I’d like to work on the issue with overlapping images in descriptions. I’ll look into adding better style constraints so images don’t spill over the layout, and if needed, I can also explore improving or replacing the markdown renderer to better support responsive images.

This should help improve the reading experience, especially for imported issues with large screenshots. Let me know if I can jump in!