diff --git a/src/components/SpaceDelegatesCard.vue b/src/components/SpaceDelegatesCard.vue index 73a13522d6f0..11e3699867ee 100644 --- a/src/components/SpaceDelegatesCard.vue +++ b/src/components/SpaceDelegatesCard.vue @@ -62,14 +62,38 @@ function handleDropdownAction(action: string) { class="flex h-full w-full flex-col justify-between rounded-xl border border-skin-border px-3 pb-3 pt-[12px] md:px-3 md:pb-3 md:pt-[12px]" @click="emit('clickUser')" > - <div class="flex w-full justify-between"> - <div class="flex items-center text-left"> - <AvatarUser :address="delegate.id" size="40" /> - <div class="ml-3"> - <div class="font-semibold text-skin-heading"> - {{ getUsername(delegate.id, profiles[delegate.id]) }} + <div class="flex w-full"> + <div class="flex items-center text-left gap-3 flex-auto min-w-0"> + <AvatarUser :address="delegate.id" size="40" class="shrink-0" /> + <div class="flex flex-col truncate grow"> + <div class="flex truncate gap-1"> + <div class="font-semibold text-skin-heading truncate flex-auto"> + {{ getUsername(delegate.id, profiles[delegate.id]) }} + </div> + <BaseMenu + :items="dropdownItems" + @select="handleDropdownAction($event)" + @click.stop + > + <template #button> + <BaseButtonIcon class="-mr-[6px] !h-[24px]"> + <i-ho-dots-horizontal class="text-[17px]" /> + </BaseButtonIcon> + </template> + <template #item="{ item }"> + <div class="w-[170px] text-skin-link"> + <span class="flex items-center gap-1"> + {{ item.text }} + <i-ho-external-link + v-if="item.action === 'seeExplorer'" + class="text-sm" + /> + </span> + </div> + </template> + </BaseMenu> </div> - <div class="flex gap-[6px]"> + <div class="flex gap-x-[6px] flex-wrap"> <div v-tippy="{ content: `${formatNumber( @@ -98,28 +122,6 @@ function handleDropdownAction(action: string) { </div> </div> </div> - <BaseMenu - :items="dropdownItems" - @select="handleDropdownAction($event)" - @click.stop - > - <template #button> - <BaseButtonIcon class="-mr-[6px] !h-[24px]"> - <i-ho-dots-horizontal class="text-[17px]" /> - </BaseButtonIcon> - </template> - <template #item="{ item }"> - <div class="w-[170px] text-skin-link"> - <span class="flex items-center gap-1"> - {{ item.text }} - <i-ho-external-link - v-if="item.action === 'seeExplorer'" - class="text-sm" - /> - </span> - </div> - </template> - </BaseMenu> </div> <div class="mt-3 h-[48px] cursor-pointer"> diff --git a/src/views/SpaceDelegates.vue b/src/views/SpaceDelegates.vue index 29b7c1c580ec..8cfb0b8c8d60 100644 --- a/src/views/SpaceDelegates.vue +++ b/src/views/SpaceDelegates.vue @@ -23,14 +23,14 @@ const { hasDelegatesLoadFailed, hasDelegationPortal } = useDelegates(props.space); -const { profiles } = useProfiles(); +const { profiles, loadProfiles } = useProfiles(); const { modalAccountOpen } = useModal(); const route = useRoute(); const router = useRouter(); const { t } = useI18n(); const { isFollowing } = useFollowSpace(props.space.id); const { web3Account } = useWeb3(); -const { getStatement } = useStatement(); +const { getStatement, loadStatements } = useStatement(); const searchInput = ref((route.query.search as string) || ''); const searchInputDebounced = refDebounced(searchInput, 300); @@ -138,6 +138,12 @@ watch(matchFilter, () => { loadDelegates(matchFilter.value); }); +watch(delegates, delegates => { + const ids = delegates.map(d => d.id); + loadStatements(props.space.id, ids); + loadProfiles(ids); +}); + onMounted(() => { if (!hasDelegationPortal) return;