From 8d5a2ac0a1fcaf4a93be8f8622da5a86fc782467 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sun, 13 Aug 2023 12:01:01 +0900
Subject: [PATCH] Update announcements.vue

---
 .../frontend/src/ui/_common_/announcements.vue | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/packages/frontend/src/ui/_common_/announcements.vue b/packages/frontend/src/ui/_common_/announcements.vue
index 83b1e4a417..61e5f48029 100644
--- a/packages/frontend/src/ui/_common_/announcements.vue
+++ b/packages/frontend/src/ui/_common_/announcements.vue
@@ -5,8 +5,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <div :class="$style.root">
-	<div
-		v-for="announcement in $i.unreadAnnouncements.filter(x => x.display === 'banner')" :key="announcement.id" :class="$style.item"
+	<MkA
+		v-for="announcement in $i.unreadAnnouncements.filter(x => x.display === 'banner')" :key="announcement.id" :class="$style.item" to="/announcements"
 	>
 		<span :class="$style.icon">
 			<i v-if="announcement.icon === 'info'" class="ti ti-info-circle"></i>
@@ -16,7 +16,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</span>
 		<span :class="$style.title">{{ announcement.title }}</span>
 		<span :class="$style.body">{{ announcement.text }}</span>
-	</div>
+	</MkA>
 </div>
 </template>
 
@@ -43,6 +43,15 @@ import { $i } from '@/account';
 	contain: strict;
 	background: var(--accent);
 	color: var(--fgOnAccent);
+
+	@container (max-width: 1000px) {
+		display: block;
+		text-align: center;
+
+		> .body {
+			display: none;
+		}
+	}
 }
 
 .icon {
@@ -61,5 +70,8 @@ import { $i } from '@/account';
 .body {
 	min-width: 0;
 	flex: 1;
+	overflow: clip;
+	white-space: nowrap;
+	text-overflow: ellipsis;
 }
 </style>