fix: fullscreen button not working for videos

[floyd-li]

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 Unable to maximalize videofiles #7744
• 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.

2023-10-21.22.13.14.mov

Copilot Summary

🤖 Generated by Copilot at e8b726c

Improved the layout and responsiveness of the gallery item modal on different screen sizes. Fixed a bug where the modal close button was hidden by the media.

🤖 Generated by Copilot at e8b726c

Sing, O Muse, of the skillful coder who refined the gallery
And made the modal window fit the screens of every size
He added append-to-body and max-height to b-modal
And gave gallery-item-modal-content full width to please the eyes

[kodabot]

WARNING @floyd-li PR for issue #7744 which isn't assigned to you. Please be warned that this PR may get rejected if there's another assignee for issue #7744

[netlify]

✅ Deploy Preview for koda-canary ready!

Name	Link
🔨 Latest commit	e8b726c
🔍 Latest deploy log	https://app.netlify.com/sites/koda-canary/deploys/6533dd17cd5a0600087919bb
😎 Deploy Preview	https://deploy-preview-7767--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 e8b726c and detected 0 issues on this pull request.

View more on Code Climate.

[reviewpad]

AI-Generated Summary: This pull request introduces a fix to the fullscreen button functionality on the gallery item component in the Vue codebase. It adjusts the z-index and the class of gallery item media in GalleryItem.vue, allowing the proper functioning of the fullscreen mode toggle. Moreover, it modifies the GalleryItemPreviewer.vue component by appending the fullscreen modal to the body and setting the max height to 100% of the viewport height, as well as adjusting the width property of .gallery-item-modal-content. The changes involve 7 insertions and 2 deletions across 2 files.

[sonarqubecloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
1 Code Smell

No Coverage information
1.3% Duplication

[yangwao]

Thanks!
pay 30 usd

[yangwao]

😍 Perfect, I’ve sent the payout
💵 $30 @ 4.15 USD/DOT ~ 7.229 $DOT
🧗 13rv1SWoLg9Gb3tmvHPZxb7JbVy51BtMziX7k9WQGSJ7Kp3A
🔗 0xf676f022e35cd8a50813817994ec1a7ec5e8b9587cc7c22fa9b1c41dc60a6226

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