Pre Tag Overflow in Specifications Page on Mobile Devices

[kunalkeshan]

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

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

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating duplicates.
• Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• The provided reproduction is a minimal reproducible of the bug.