Kongwoo/akkoma-fe
1
0
Fork 0
mirror of https://akkoma.dev/AkkomaGang/akkoma-fe synced 2025-04-30 19:19:29 +08:00
Code Issues Projects Releases Packages Wiki Activity

fix: uniform height sizing and layouting

Browse source
This commit is contained in:
Riedler 2025-03-26 07:39:54 +01:00
parent e87a9ced61
commit e62b154228
1 changed files with 15 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
src/components/emoji_reactions/emoji_reactions.vue
View file

@ -11,7 +11,7 @@
@click="emojiOnClick(reaction.name, $event)" @click="emojiOnClick(reaction.name, $event)"
@mouseenter="fetchEmojiReactionsByIfMissing()" @mouseenter="fetchEmojiReactionsByIfMissing()"
> >
<span <template
v-if="reaction.url !== null" v-if="reaction.url !== null"
> >
<StillImage <StillImage
@ -19,16 +19,15 @@
:title="reaction.name" :title="reaction.name"
:alt="reaction.name" :alt="reaction.name"
class="reaction-emoji" class="reaction-emoji"
height="2.55em"
/> />
{{ reaction.count }} {{ reaction.count }}
</span> </template>
<span v-else> <template v-else>
<span class="reaction-emoji unicode-emoji"> <span class="reaction-emoji unicode-emoji">
{{ reaction.name }} {{ reaction.name }}
</span> </span>
<span>{{ reaction.count }}</span> <span>{{ reaction.count }}</span>
</span> </template>
</button> </button>
</UserListPopover> </UserListPopover>
<a <a
@ -53,23 +52,26 @@
container-type: inline-size; container-type: inline-size;
} }
.unicode-emoji {
font-size: 210%;
}
.emoji-reaction { .emoji-reaction {
padding: 2px 0.5em; padding: 2px 0.5em;
margin-right: 0.5em; margin-right: 0.5em;
margin-top: 0.5em; margin-top: 0.5em;
display: flex; display: flex;
align-items: center; align-items: end;
justify-content: center;
box-sizing: border-box;
.reaction-emoji { .reaction-emoji {
width: auto; width: auto;
max-width: 96cqw; max-width: 96cqw;
height: 2.55em !important;
margin-right: 0.25em; margin-right: 0.25em;
&.still-image {
height: 2.55em;
}
&.unicode-emoji {
display: inline-block;
font-size: 2.55em;
line-height: 1em;
}
} }
&:focus { &:focus {
outline: none; outline: none;