improve(friendly): UI improvement of the warning window displayed when the connection to the server is lost in a mobile environment

CHANGELOG_CHERRYPICK.md

@@ -15,6 +15,7 @@
 - 클라이언트: DeepL과 Google Translate를 선택할 수 있는 옵션 추가
 - 클라이언트: Enter 키를 눌러 보내기 옵션 추가
 - 클라이언트: 서버와 연결이 끊어졌을 때 경고를 표시하지 않는 옵션 추가
+- 클라이언트: (friendly) 모바일 환경에서 서버와 연결이 끊어졌을 때 표시되는 경고창의 UI 개선
 
 ## 12.x.x-cp-2.x.x (unreleased)_legacy
 

packages/client/src/init.ts

@@ -317,7 +317,9 @@ import { getAccountFromId } from '@/scripts/get-account-from-id';
 			if (!canceled) {
 				location.reload();
 			}
-		} else if (defaultStore.state.serverDisconnectedBehavior === 'none') {}
+		} else if (defaultStore.state.serverDisconnectedBehavior === 'none') {
+			// none }
+		}
 	});
 
 	stream.on('emojiAdded', emojiData => {

packages/client/src/ui/_common_/stream-indicator.vue

@@ -1,6 +1,6 @@
 <template>
-<div v-if="hasDisconnected && $store.state.serverDisconnectedBehavior === 'quiet'" class="nsbbhtug" @click="resetDisconnected">
-	<div>{{ i18n.ts.disconnectedFromServer }}</div>
+<div v-if="hasDisconnected && $store.state.serverDisconnectedBehavior === 'quiet'" class="nsbbhtug" :class="{ friendly: isFriendly }" @click="resetDisconnected">
+	<div class="text">{{ i18n.ts.disconnectedFromServer }}</div>
 	<div class="command">
 		<button class="_textButton" @click="reload">{{ i18n.ts.reload }}</button>
 		<button class="_textButton">{{ i18n.ts.doNothing }}</button>
@@ -9,10 +9,12 @@
 </template>
 
 <script lang="ts" setup>
-import { onUnmounted } from 'vue';
+import { onUnmounted, ref } from 'vue';
 import { stream } from '@/stream';
 import { i18n } from '@/i18n';
 
+const isFriendly = $ref(localStorage.getItem('ui') === 'friendly');
+
 let hasDisconnected = $ref(false);
 
 function onDisconnected() {
@@ -45,10 +47,31 @@ onUnmounted(() => {
 	font-size: 0.9em;
 	color: #fff;
 	background: #000;
-	opacity: 0.8;
+	opacity: 0.7;
 	border-radius: 4px;
 	max-width: 320px;
 
+	&.friendly {
+		@media (max-width: 1099px) {
+			display: flex;
+			width: 100%;
+			max-width: initial;
+			top: 55px;
+			bottom: initial;
+			right: initial;
+			border-radius: initial;
+
+			> .text {
+				padding: 0.7em;
+			}
+
+			> .command {
+				position: fixed;
+				right: 0;
+			}
+		}
+	}
+
 	> .command {
 		display: flex;
 		justify-content: space-around;