diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue index 2a4a3f0b1ec6..42ed872d91ec 100644 --- a/packages/frontend/src/components/MkNote.vue +++ b/packages/frontend/src/components/MkNote.vue @@ -47,8 +47,7 @@ SPDX-License-Identifier: AGPL-3.0-only
- - +
@@ -186,7 +185,6 @@ import MkPoll from '@/components/MkPoll.vue'; import MkUsersTooltip from '@/components/MkUsersTooltip.vue'; import MkUrlPreview from '@/components/MkUrlPreview.vue'; import MkInstanceTicker from '@/components/MkInstanceTicker.vue'; -import MkInstanceIcon from '@/components/MkInstanceIcon.vue'; import { pleaseLogin, type OpenOnRemoteOptions } from '@/scripts/please-login.js'; import { checkWordMute } from '@/scripts/check-word-mute.js'; import { userPage } from '@/filters/user.js'; @@ -814,16 +812,6 @@ function emitUpdReaction(emoji: string, delta: number) { left: 0; } -.instanceicon { - display: block !important; - padding-top: 33px; - width: 0; - height: 25px; - z-index: 10; - position: sticky !important; - top: calc(22px + var(--stickyTop, 0px)); -} - .main { flex: 1; min-width: 0; @@ -964,12 +952,6 @@ function emitUpdReaction(emoji: string, delta: number) { width: 50px; height: 50px; } - - .instanceicon { - padding-top: 29px; - height: 21px; - width: 0; - } } @container (max-width: 500px) { @@ -1016,13 +998,6 @@ function emitUpdReaction(emoji: string, delta: number) { height: 46px; top: calc(14px + var(--MI-stickyTop, 0px)); } - - .instanceicon { - padding-top: 27px; - height: 19px; - width: 0; - top: calc(14px + var(--stickyTop, 0px)); - } } @container (max-width: 400px) { @@ -1058,11 +1033,6 @@ function emitUpdReaction(emoji: string, delta: number) { height: 44px; } - .instanceicon { - margin-right: -17px; - height: 17px; - } - .root:not(.showActionsOnlyHover) { .footerButton { &:not(:last-child) { diff --git a/packages/frontend/src/components/global/MkAvatar.vue b/packages/frontend/src/components/global/MkAvatar.vue index 35c07bc80ca3..13c39a5f29dc 100644 --- a/packages/frontend/src/components/global/MkAvatar.vue +++ b/packages/frontend/src/components/global/MkAvatar.vue @@ -35,6 +35,7 @@ SPDX-License-Identifier: AGPL-3.0-only }" alt="" > + @@ -49,6 +50,7 @@ import { getStaticImageUrl } from '@/scripts/media-proxy.js'; import { acct, userPage } from '@/filters/user.js'; import MkUserOnlineIndicator from '@/components/MkUserOnlineIndicator.vue'; import { defaultStore } from '@/store.js'; +import MkInstanceIcon from '@/components/MkInstanceIcon.vue'; const animation = ref(defaultStore.state.animation); const squareAvatars = ref(defaultStore.state.squareAvatars); @@ -62,6 +64,7 @@ const props = withDefaults(defineProps<{ indicator?: boolean; decorations?: (Omit & { blink?: boolean; })[]; forceShowDecoration?: boolean; + showInstance?: boolean; }>(), { target: null, link: false, @@ -69,6 +72,7 @@ const props = withDefaults(defineProps<{ indicator: false, decorations: undefined, forceShowDecoration: false, + showInstance: false, }); const emit = defineEmits<{ @@ -343,4 +347,30 @@ watch(() => props.user.avatarBlurhash, () => { filter: brightness(1); } } + +.instanceicon { + height: 25px; + z-index: 2; + position: absolute; + left: 0; + bottom: 0; +} + +@container (max-width: 580px) { + .instanceicon { + height: 21px; + } +} + +@container (max-width: 450px) { + .instanceicon { + height: 19px; + } +} + +@container (max-width: 300px) { + .instanceicon { + height: 17px; + } +}