up

src/components/ConnectionPanel.vue

@@ -228,7 +228,7 @@ onUnmounted(() => clearInterval(timer))
         {{ state.preparation.total }} файлов; текущая загрузка
         {{ (state.preparation.downloadedBytes / 1048576).toFixed(1) }} МиБ.
       </p>
-      <n-alert v-if="state.preparation.error" type="warning">
+      <n-alert v-if="state.preparation.error" type="warning" class="connection-error">
         {{ state.preparation.error }}. Прежний показ сохраняется до готовности замены.
         <n-button
           :disabled="isBusy || state.busy || state.preparation.active"
@@ -236,7 +236,13 @@ onUnmounted(() => clearInterval(timer))
           >Повторить подготовку</n-button
         >
       </n-alert>
-      <n-alert v-if="state.error" type="error">{{ state.error }}</n-alert>
+      <n-alert
+        v-if="state.error"
+        type="error"
+        class="connection-error"
+        data-testid="connection-error"
+        >{{ state.error }}</n-alert
+      >
       <n-alert v-if="state.notice" type="info">{{ state.notice }}</n-alert>
       <template v-if="state.busy">
         <p role="status">
@@ -262,4 +268,9 @@ onUnmounted(() => clearInterval(timer))
 .connection-content > button {
   align-self: flex-start;
 }
+
+.connection-error {
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
+}
 </style>

src/components/ScreenPlanPanel.vue

@@ -48,7 +48,7 @@ const modeOptions = Object.entries(modeLabels).map(([mode, label]) => ({
         </n-button>
       </template>
     </n-space>
-    <n-alert v-if="notice" type="warning" role="status">{{ notice }}</n-alert>
+    <n-alert v-if="notice" type="warning" role="status" class="plan-notice">{{ notice }}</n-alert>
     <p v-if="!canEdit">Для редактирования войдите на сервер выбранной подготовленной игры.</p>
     <template v-if="isEditing">
       <n-space v-for="(step, index) in draft" :key="index" vertical class="plan-step">
@@ -199,6 +199,10 @@ const modeOptions = Object.entries(modeLabels).map(([mode, label]) => ({
 </template>
 
 <style scoped>
+.plan-notice {
+  overflow-wrap: anywhere;
+}
+
 .plan-step {
   border: 1px solid var(--brand-background);
   overflow-wrap: anywhere;