fix: Use more updated card as mockup

[Jarsen136]

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

Needs Design check

• @exezbcz please review

Context

• Closes Use more updated card as mockup  #7851
• Requires deployment <snek/rubick/worker>

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

• My DOT address: Payout

Screenshot 📸

• My fix has changed UI

Copilot Summary

🤖 Generated by Copilot at 4a6bc8e

Improved the UI of the NFT creation page by adjusting the preview card component. Added a function to display the correct chain name by prefix in CreateNftPreview.vue.

🤖 Generated by Copilot at 4a6bc8e

Oh, we're the crew of the NFT ship, and we sail the blockchain sea
We make our art and we mint our cards, with a preview component
We use a function to get the chain, by the prefix that it has
And we heave and haul on the style and position, on the count of three

[netlify]

✅ Deploy Preview for koda-canary ready!

Name	Link
🔨 Latest commit	4a6bc8e
🔍 Latest deploy log	https://app.netlify.com/sites/koda-canary/deploys/653d4969c55a650008e6ea09
😎 Deploy Preview	https://deploy-preview-7867--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 @Jarsen136 PR for issue #7851 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, titled "fix: Use more updated card as mockup", contains modifications to the CreateNftPreview.vue component. The patch includes changes in classes, divs, and functionalities for presenting the mockup card. These changes include improved style implementation, tweaks to the layout and text for better readability, as well as replacing the static import NAMES with a function getChainNameByPrefix(chain). Moreover, the changes address the responsive design by modifying the positioning of the preview card based on the screen resolution. These enhancements provide a more updated and user-friendly display of the NFT preview card.

[codeclimate]

Code Climate has analyzed commit 4a6bc8e 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
1.0% Duplication

[yangwao]

Top Thanks!
pay 30 usd

[yangwao]

😍 Perfect, I’ve sent the payout
💵 $30 @ 4.22 USD/DOT ~ 7.109 $DOT
🧗 16SjUbGKSdjCdWTy3NNT3JxbRVGGqD4mwkHpc6BD9U2Rp29Z
🔗 0x3a21400f64c450addc8cfc305fd93ec675a60834b2da2700e7bdfb4f3fed1a64

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