fix: アイコンを四角形に設定した際ユーザポップアップのデザイン改善

CHANGELOG_CHERRYPICK.md

@@ -61,6 +61,7 @@
 - Fix: 네트워크 트래픽이 10MB/s를 초과하면 네트워크 통계 위젯의 그래프가 잘못 출력되는 문제
 - Fix: iOS 기기에서 채팅 입력란이 채팅을 가리는 문제
 - Fix: 특정 MFM 구문이 포함된 노트 간략화 옵션 비활성화 시, MFM 구문에 대해서는 더보기 버튼을 표시하지 않도록
+- Fix: 프로필 아이콘을 사각형으로 설정했을 때 유저 팝업의 디자인 개선
 
 ### Server
 - mfm-js를 cherrypick-mfm-js로 변경

packages/frontend/src/components/MkUserPopup.vue

@@ -11,7 +11,7 @@
 			<div :class="$style.banner" :style="user.bannerUrl ? `background-image: url(${user.bannerUrl})` : ''">
 				<span v-if="$i && $i.id != user.id && user.isFollowed" :class="$style.followed">{{ i18n.ts.followsYou }}</span>
 			</div>
-			<svg viewBox="0 0 128 128" :class="$style.avatarBack">
+			<svg v-if="!defaultStore.state.squareAvatars" viewBox="0 0 128 128" :class="$style.avatarBack">
 				<g transform="matrix(1.6,0,0,1.6,-38.4,-51.2)">
 					<path d="M64,32C81.661,32 96,46.339 96,64C95.891,72.184 104,72 104,72C104,72 74.096,80 64,80C52.755,80 24,72 24,72C24,72 31.854,72.018 32,64C32,46.339 46.339,32 64,32Z" style="fill: var(--popup);"/>
 				</g>
@@ -177,6 +177,7 @@ onMounted(() => {
 	z-index: 2;
 	width: 58px;
 	height: 58px;
+	background: var(--panel);
 }
 
 .title {