fix: Collection pfp object fit

[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
• Feature
• Refactoring

Needs Design check

• @exezbcz please review

Context

• Closes Collection pfp object fit  #6718
• 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 e1eeea8

This pull request updates the image styling for the CollectionBanner and UnlockableCollectionBanner components by adding the object-fit-cover class to the img elements. This class is defined in the global.scss file, which is also modified to remove an unused class. The goal is to make the banner images fit the containers better and improve the visual appearance of the collections.

🤖 Generated by Copilot at e1eeea8

To make the banner images fit
The object-fit-cover class was a hit
But it had to be moved
To another component improved
And the global styles got a bit of a split

[kodabot]

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

[netlify]

✅ Deploy Preview for koda-canary ready!

Name	Link
🔨 Latest commit	e1eeea8
🔍 Latest deploy log	https://app.netlify.com/sites/koda-canary/deploys/64db9961ab5f4d0008676484
😎 Deploy Preview	https://deploy-preview-6728--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.

[codeclimate]

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

View more on Code Climate.

[reviewpad]

AI-Generated Summary: This pull request introduces a fix for the image fitting issue in collections. The "object-fit-cover" class has been added to images in both the CollectionHeader and UnlockableCollectionBanner components, ensuring that these images are displayed properly. Additionally, a new CSS definition for the "object-fit-cover" class was introduced in the global.scss file, applying the CSS property "object-fit: cover". Overall, these changes enhance the visual display of collection images, improving the user interface of the application.

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
2.3% Duplication

[Jarsen136]

Two kinds of object-fit could be chosen. Which one do you prefer to? @exezbcz

object-fit: contain

object-fit: cover

[vikiival]

@exezbcz please ping once approved

[exezbcz]

Two kinds of object-fit could be chosen. Which one do you prefer to? @exezbcz

object-fit: contain

object-fit: cover

Cover please

[yangwao]

pay 20 usd

[yangwao]

😍 Perfect, I’ve sent the payout
💵 $20 @ 4.77 USD/DOT ~ 4.193 $DOT
🧗 16SjUbGKSdjCdWTy3NNT3JxbRVGGqD4mwkHpc6BD9U2Rp29Z
🔗 0x5336eeaeba15b2d958ec8f1d0e9dddf1f89e12385358beb3f770d5a5c7f1f988

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