fix(client/friendly): モバイルでヘッダーが消えるときにプロフィールアイコンの高さが正しく設定されない問題

CHANGELOG_CHERRYPICK.md

@@ -39,6 +39,7 @@
 - Fix: (Friendly) 타임라인이 변경되었을 때 네비게이션 바의 인디케이터가 사라지지 않는 문제
 - Fix: 네트워크 트래픽이 10MB/s를 초과하면 네트워크 통계 위젯의 그래프가 잘못 출력되는 문제
 - Fix: iOS 기기에서 채팅 입력란이 채팅을 가리는 문제
+- Fix: (Friendly) 모바일에서 헤더가 사라졌을 때 프로필 아이콘의 높이가 잘못 설정되는 문제
 
 ### Server
 - mfm-js를 cherrypick-mfm-js로 변경

packages/frontend/src/components/MkNoteSimple.vue

@@ -1,6 +1,6 @@
 <template>
 <div :class="$style.root">
-	<MkAvatar :class="$style.avatar" :user="note.user" link preview/>
+	<MkAvatar :class="[$style.avatar, { [$style.showEl]: showEl && mainRouter.currentRoute.value.name === 'index', [$style.showElTab]: showEl && mainRouter.currentRoute.value.name !== 'index' }]" :user="note.user" link preview/>
 	<div :class="$style.main">
 		<MkNoteHeader :class="$style.header" :note="note" :mini="true"/>
 		<div style="padding-top: 10px;">
@@ -17,12 +17,16 @@
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
+import { onMounted } from 'vue';
 import * as misskey from 'misskey-js';
 import MkNoteHeader from '@/components/MkNoteHeader.vue';
 import MkSubNoteContent from '@/components/MkSubNoteContent.vue';
 import MkCwButton from '@/components/MkCwButton.vue';
 import { $i } from '@/account';
+import { eventBus } from '@/scripts/cherrypick/eventBus';
+import { mainRouter } from '@/router';
+
+let showEl = $ref(false);
 
 const props = defineProps<{
 	note: misskey.entities.Note;
@@ -30,6 +34,12 @@ const props = defineProps<{
 }>();
 
 const showContent = $ref(false);
+
+onMounted(() => {
+	eventBus.on('showEl', (showEl_receive) => {
+		showEl = showEl_receive;
+	});
+});
 </script>
 
 <style lang="scss" module>
@@ -76,6 +86,18 @@ const showContent = $ref(false);
 	padding: 0;
 }
 
+@container (max-width: 500px) {
+	.avatar {
+		&.showEl {
+			top: 14px;
+		}
+
+		&.showElTab {
+			top: 54px;
+		}
+	}
+}
+
 @container (min-width: 250px) {
 	.avatar {
 		margin: 0 10px 0 0;