core: frontend: kraken: Round app icon corners

[patrickelectric]

Some extension icons are hard squares on the store card and details modal.

Fix #3226

[github-actions]

Automated PR Review

0. Summary

• Verdict: MINOR SUGGESTIONS ✏️

Rounds the extension icon corners on the Kraken store card and details modal. StoreExtensionCard.vue bumps the .v-img border-radius from 8px to 20px, and ExtensionDetailsModal.vue swaps the avatar's rounded="0" for a new .extension-icon class with border-radius: 13px !important; overflow: hidden;.

6. Code Quality & Style

• 6.1 [minor] core/frontend/src/components/kraken/modals/ExtensionDetailsModal.vue:393 — the new .extension-icon rule is added to the <style> block at line 332, which is unscoped (unlike StoreExtensionCard.vue, which uses <style scoped>). That leaks .extension-icon globally. Nothing else currently uses this class name, but the risk is easy to remove either by making the style scoped or by using a more specific selector (e.g. .v-card-subtitle .extension-icon). Same applies to the other rules already in that block — not this PR's job to fix, but worth being aware of when adding to it.
• 6.2 [nit] The two files pick different radii (20px for the 150px card logo, 13px for the 100px modal avatar). Ratios are close (~13% of the side), so this is intentional-looking, but the values are magic numbers duplicated across components. If a third surface picks up the same treatment later, consider lifting to a shared CSS variable / mixin (e.g. --extension-icon-radius: 13%) so the rounding stays consistent.

9. Nitpicks / Optional

• 9.1 [nit] core/frontend/src/components/kraken/modals/ExtensionDetailsModal.vue:394 — !important is only needed because Vuetify's .v-avatar sets its own border-radius. A slightly more specific selector like .v-avatar.extension-icon would achieve the same override without !important and be friendlier to future overrides.
• 9.2 [nit] core/frontend/src/components/kraken/cards/StoreExtensionCard.vue:491 — the scoped .v-img { border-radius: 20px; } also applies to the small 32px company-logo v-img inside the <v-avatar size="32" rounded="0"> at line 79. Because that avatar has overflow: hidden and rounded="0", the inner rounding is masked and not visible — no visual bug — but tightening the selector to .logo-img (the class already on the main hero image at line 55) would make the intent obvious and avoid depending on the avatar's clipping behavior.

Generated by PR Review Bot. This is advisory, a human reviewer must still approve.