carloscuesta / gitmoji

An emoji guide for your commit messages. 😜
https://gitmoji.dev
MIT License
15.54k stars 802 forks source link

Pre Tag Overflow in Specifications Page on Mobile Devices #1610

Closed kunalkeshan closed 10 months ago

kunalkeshan commented 10 months ago

Describe the bug

Issue

On the Specifications page of the website, there's an issue with the formatting of the Gitmoji commit content. When viewed on mobile devices, the <pre> tag containing the Gitmoji commit format overflows its container, making it difficult to read and potentially causing a poor user experience.

Screenshot

WhatsApp Image 2023-10-07 at 11 21 37_ae126a1e

Expected Behavior

The Gitmoji commit format in the <pre> tag should be properly formatted and displayed within its container, ensuring readability and a seamless user experience on mobile devices.

An overflow scroll in the horizontal direction should do the trick.

Actual Behavior

The Gitmoji commit format in the <pre> tag overflows its container on mobile devices, making it challenging to read and understand.

Reproduction

  1. Open the website on a mobile device (e.g., smartphone or tablet).
  2. Navigate to the Specifications page.
  3. Locate the section that displays the Gitmoji commit format.

System Info

Mobile: Samsung S23.

Validations