feat: fixed container width on super wide screen

[newraina]

Thank you for your contribution to the KodaDot - One Stop Shop for Polkadot NFTs.

👇 __ Let's make a quick check before the contribution.

PR Type

• Bugfix
• Feature
• Refactoring

Context

• Closes Remove full width and back to fix width 1280px on gallery item? #7703
• Requires deployment <snek/rubick/worker>

Before submitting pull request, please make sure:

• My contribution builds clean without any errors or warnings
• I've merged recent default branch -- main and I've no conflicts
• I've tried to respect high code quality standards
• I've didn't break any original functionality

Optional

• I've tested it at </ksm/collection>
• I've tested PR on mobile
• I've written unit tests 🧪
• I've found edge cases

Did your issue had any of the "$" label on it?

• Fill up your DOT address: Payout

Community participation

• Are you at KodaDot Ecosystem Telegram?

Screenshot 📸

• My fix has changed something on UI; a screenshot is best to understand changes for others.

The container width of the gallery item is fixed to 1344px when the screen width exceeds 1440px.

Copilot Summary

🤖 Generated by Copilot at 2b8ace8

This pull request introduces a new layout component gallery-item-layout.vue that is used for displaying gallery items (NFTs) and their collections with a consistent UI and SEO features. The pull request also applies this layout to the existing pages that show the details and the gallery of NFTs based on their prefix and id.

🤖 Generated by Copilot at 2b8ace8

gallery-item-layout
A new component for NFTs
With navbar and footer

[netlify]

✅ Deploy Preview for koda-canary ready!

Name	Link
🔨 Latest commit	2b8ace8
🔍 Latest deploy log	https://app.netlify.com/sites/koda-canary/deploys/653cc98e57890d000824e854
😎 Deploy Preview	https://deploy-preview-7861--koda-canary.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.

[kodabot]

SUCCESS @newraina PR for issue #7703 which is assigned to you. Please wait for review and don't hesitate to grab another issue in the meantime!

[reviewpad]

AI-Generated Summary: This pull request introduces a new layout for gallery items on super wide screens. layouts/gallery-item-layout.vue is a newly created file that contains the HTML structure and associated Vue scripts for the layout. The container width for this layout is dynamic, it is fluid only when the screen width is less than 1440px. NuxtPage and Error components are also included in this layout to handle different scenarios. This layout is then used in the detail and gallery routes, which are present in the pages/[prefix]/detail/[id].vue and pages/[prefix]/gallery/[id].vue files respectively. These files are updated to utilize the gallery-item-layout thus providing a consistent user interface across pages.

[codeclimate]

Code Climate has analyzed commit 2b8ace8 and detected 0 issues on this pull request.

View more on Code Climate.

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.8% Duplication

[exezbcz]

nice job, thank you.

I am now thinking whether move the breakpoint to the 1920px

what do you think guys?

[newraina]

I am now thinking whether move the breakpoint to the 1920px

@exezbcz OK for me, easy to change.

It's true that 1440 isn't very wide.

[yangwao]

I am now thinking whether move the breakpoint to the 1920px

let's stick now with 1440p and let see

[yangwao]

Thanks!
pay 30 usd

[yangwao]

😍 Perfect, I’ve sent the payout
💵 $30 @ 4.21 USD/DOT ~ 7.126 $DOT
🧗 1CAv6Zq3yVxL3eKhC94GWTWVwp1w4jZbqeZ6wXx1rPAhrce
🔗 0x7b0a943e0aff426f2796507d1e3e22ff6cecb1a4d6fb5a6ed8032d65e9b4a6c5

🪅 Let’s grab another issue and get rewarded!
🪄 github.com/kodadot/nft-gallery/issues