Bug Report 🐛

Navbar distortion on mobile devices with large aspect ratios

Current Behavior

On certain mobile devices, particularly those with taller and narrower aspect ratios (like Samsung S20 Ultra, Samsung F13, and Samsung Galaxy Z Fold 5), the "Template Playground" text overlaps with the logo and disrupts the navbar layout. This makes the navigation look broken and affects usability.

Mobile Devices Affected

The issue is noticeable on devices with large aspect ratios, such as:

• Samsung Galaxy Z Fold 5 (2176 x 1812, 21.6:18 aspect ratio – inner display)
• Samsung Galaxy S20 Ultra (3200 x 1440, 20:9 aspect ratio)
• Samsung Galaxy F13 (2408 x 1080, 20:9 aspect ratio)
• Google Pixel 6 Pro (3120 x 1440, 19.5:9 aspect ratio)
• OnePlus 9 Pro (3216 x 1440, 20.1:9 aspect ratio)
• Xiaomi Mi 11 Ultra (3200 x 1440, 20:9 aspect ratio)

Expected Behavior

The "Template Playground" text in the navbar should align properly with the logo and the rest of the navigation items on all screen sizes, including mobile devices with large aspect ratios.

Possible Solution

• Hide the "Template Playground" text on large-aspect-ratio screens using media queries.
• Use a display: none; rule for aspect ratios greater than 19:9 to prevent the text from disturbing the navbar layout.
• Ensure the logo and other navigation items remain properly aligned and visible.

Steps to Reproduce

1. Open the website on a mobile device with a large aspect ratio (listed below).
2. Observe the navbar layout.
3. Notice the "Template Playground" text overlapping with the logo or pushing navbar items out of alignment.
4. Check the console for potential layout issues.

Detailed Description

The navbar should be optimized for large-aspect-ratio mobile devices by hiding the "Template Playground" text. This ensures the navbar layout remains clean and visually consistent.