fix(Navbar): Update alignment for mobile devices with large aspect ratios (#324)

[sahilkhan117]

Closes #324

Update alignment for mobile devices with large aspect ratios

Changes

• For small screens uses screens.sm to hide the "Template Playground" text on problematic devices with large aspect ratios.
• Ensured the change does not disturb the view on other devices, maintaining the existing layout consistency.

Flags

• This fix is specifically targeted at large-aspect-ratio screens and does not affect regular mobile or desktop views.
• Tested on multiple devices to confirm the layout remains intact.

✅ Tested Devices List

This change was verified on the following devices with large aspect ratios:

• 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)

Screenshots or Video

Related Issues

• Issue Closes Navbar's Logo and Text disturbed on some mobile devices with large aspect ratios #324

Author Checklist

• Ensure you provide a DCO sign-off for your commits using the --signoff option of git commit.
• Verified the fix on multiple large-aspect-ratio devices.
• No documentation updates necessary.
• Merging to main from fork:sahilkhan117/i324/fix-navbar-for-mobile-layout.

[netlify]

✅ Deploy Preview for ap-template-playground ready!

Name	Link
🔨 Latest commit	f48697f
🔍 Latest deploy log	https://app.netlify.com/sites/ap-template-playground/deploys/67e3004425a2260008cde18c
😎 Deploy Preview	https://deploy-preview-325--ap-template-playground.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.