fix: Activity event improvements

[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

Context

• Closes Activity event improvements #5775
• 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

Had issue bounty label?

• Fill up your KSM address: Payout

Community participation

• Are you at KodaDot Discord?

Screenshot 📸

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

Copilot Summary

🤖 Generated by Copilot at e83d93e

Refactored and improved the layout and responsiveness of the collection activity event components. Used props, utility classes, and flexbox to control the size, alignment, and overflow of the avatar, event, and text elements. Modified EventRowAvatar.vue, EventRowDesktop.vue, EventRowTablet.vue, and Events.vue.

🤖 Generated by Copilot at e83d93e

Sing, O Muse, of the skillful coder who refines
The EventRowAvatar component with a size prop divine
And who enhances the event row for desktop view sublime
With utility classes and overflow control, a master of design

[kodabot]

SUCCESS @Jarsen136 PR for issue #5775 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	90af86d
🔍 Latest deploy log	https://app.netlify.com/sites/koda-canary/deploys/6447ea0bcdaa9a0008f11aa5
😎 Deploy Preview	https://deploy-preview-5801--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 settings.

[reviewpad]

AI-Generated Summary: This pull request includes changes related to activity event improvements in the Events.vue, EventRowAvatar.vue, EventRowDesktop.vue, and EventRowTablet.vue files. The modifications introduce stylesheet adjustments, refined code structure, and enhanced layout for desktop and tablet views. Overall, the update aims to refine the visual representation of activity events and improve the associated user experience.

[exezbcz]

hey hey, no jumping to second row please

[daiagi]

please make sure the preview is square all the time and check if the preview does not stretch the imgs, but scale them

I think EventRowAvatar is missing object-fit: cover;

• I think EventRowAvatar can be made into NeoAvatar component
  and can be used in Activity, MassMint, notifications, more?

[Jarsen136]

hey hey, no jumping to second row please

Fixed

[Jarsen136]

please make sure the preview is square all the time and check if the preview does not stretch the imgs, but scale them

I think EventRowAvatar is missing object-fit: cover;

done

• I think EventRowAvatar can be made into NeoAvatar component
  and can be used in Activity, MassMint, notifications, more?

✅ I have added NeoAvatar component into ui libs.

[codeclimate]

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

View more on Code Climate.

[roiLeo]

hmm... not sure about that NeoAvatar this name would refer to Identity Avatar to me.
I would keep it outside libs/ui for now

What if we want to use lazy loading on these images?

otherwise lgtm ✅

[Jarsen136]

hmm... not sure about that NeoAvatar this name would refer to Identity Avatar to me. I would keep it outside libs/ui for now

IMO, this component could also be used for displaying the Identity avatar if we give it proper props. So, let's leave it here for now ?

What if we want to use lazy loading on these images?

Then we need to introduce nuxt-img or some other lazy load package. There is already an issue for nuxt-image.

[roiLeo]

IMO, this component could also be used for displaying the Identity avatar if we give it proper props. So, let's leave it here for now ?

Not the same purposes but we can keep it if you like

Then we need to introduce nuxt-img or some other lazy load package. There is already an issue for nuxt-image.

fyi libs/ui isn't a nuxt project (vue 3)

[Jarsen136]

Then we need to introduce nuxt-img or some other lazy load package. There is already an issue for nuxt-image.

fyi libs/ui isn't a nuxt project (vue 3)

Thanks for correcting me. Then it would need another lazy load package supported vue3.

[vikiival]

pay 50 usd

[yangwao]

😍 Perfect, I’ve sent the payout
💵 $50 @ 30.55 USD/KSM ~ 1.637 $KSM
🧗 Caiv9TbPz68q5dC8EcHu5xKYPRnremimGzqmEejDFNpWWLG
🔗 0xe56f6966f8b7e589316594e113eb2e189e3805b6bdcd83feef7ac9a72158c638

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