diff --git a/frontend_nuxt/components/ReactionsGroup.vue b/frontend_nuxt/components/ReactionsGroup.vue index 58b145330..2c983f93d 100644 --- a/frontend_nuxt/components/ReactionsGroup.vue +++ b/frontend_nuxt/components/ReactionsGroup.vue @@ -14,7 +14,7 @@ :class="{ selected: userReacted(r.type) }" @click="toggleReaction(r.type)" > - +
{{ counts[r.type] }}
@@ -220,6 +220,7 @@ onMounted(async () => { align-items: center; width: 100%; justify-content: space-between; + flex-wrap: wrap; } .reactions-viewer { @@ -229,6 +230,12 @@ onMounted(async () => { align-items: center; } +.reaction-emoji { + width: 20px; + height: 20px; + vertical-align: middle; +} + .reactions-viewer-item-container { display: flex; flex-direction: row; @@ -337,5 +344,23 @@ onMounted(async () => { font-size: 16px; padding: 3px 5px; } + + .reactions-viewer-item.placeholder, + .reactions-viewer-single-item { + padding: 4px 8px; + gap: 3px; + border: 1px solid var(--normal-border-color); + border-radius: 10px; + margin-right: 3px; + margin-bottom: 3px; + font-size: 12px; + color: var(--text-color); + align-items: center; + } + + .reaction-emoji { + width: 14px; + height: 14px; + } } diff --git a/frontend_nuxt/pages/users/[id].vue b/frontend_nuxt/pages/users/[id].vue index 3bdf81c29..12d47c45c 100644 --- a/frontend_nuxt/pages/users/[id].vue +++ b/frontend_nuxt/pages/users/[id].vue @@ -895,6 +895,7 @@ watch(selectedTab, async (val) => { font-weight: bold; color: var(--primary-color); text-decoration: none; + word-break: break-word; } .timeline-link:hover { @@ -969,9 +970,5 @@ watch(selectedTab, async (val) => { .hot-tag { width: 100%; } - - .profile-timeline { - width: calc(100vw - 40px); - } }