fix(client): 画面の幅が狭いとウィジェットドロワーを閉じる手段がなくなるのを修正

Fix #7191

CHANGELOG.md

@@ -112,6 +112,7 @@ You should also include the user name that made the change.
 - Server: アンテナタイムライン（ストリーミング）が、フォローしていないユーザーの鍵投稿も拾ってしまう @syuilo
 - Client: 日付形式の文字列などがカスタム絵文字として表示されるのを修正 @syuilo
 - Client: case insensitive emoji search @saschanaz
+- Client: 画面の幅が狭いとウィジェットドロワーを閉じる手段がなくなるのを修正 @syuilo
 - Client: InAppウィンドウが操作できなくなることがあるのを修正 @tamaina
 - Client: use proxied image for instance icon @syuilo
 - Client: Webhookの編集画面で、内容を保存することができない問題を修正 @m-hayabusa

packages/frontend/src/ui/universal.vue

@@ -74,6 +74,7 @@
 		:leave-to-class="$store.state.animation ? $style.transition_widgetsDrawer_leaveTo : ''"
 	>
 		<div v-if="widgetsShowing" :class="$style.widgetsDrawer">
+			<button class="_button" :class="$style.widgetsCloseButton" @click="widgetsShowing = false"><i class="ti ti-x"></i></button>
 			<XWidgets/>
 		</div>
 	</Transition>
@@ -310,6 +311,18 @@ $widgets-hide-threshold: 1090px;
 	background: var(--bg);
 }
 
+.widgetsCloseButton {
+	padding: 8px;
+	display: block;
+	margin: 0 auto;
+}
+
+@media (min-width: 370px) {
+	.widgetsCloseButton {
+		display: none;
+	}
+}
+
 .nav {
 	position: fixed;
 	z-index: 1000;