From 8c9c89a137ab24dd56f8bf3d51fa3d8e3c80a245 Mon Sep 17 00:00:00 2001
From: arrow2nd <44780846+arrow2nd@users.noreply.github.com>
Date: Sun, 5 Mar 2023 21:59:41 +0900
Subject: [PATCH] =?UTF-8?q?fix(frontend):=20=E3=83=A6=E3=83=BC=E3=82=B6?=
 =?UTF-8?q?=E3=83=BC=E3=83=9A=E3=83=BC=E3=82=B8=E3=81=AE=E3=83=90=E3=83=83?=
 =?UTF-8?q?=E3=82=B8=E8=A1=A8=E7=A4=BA=E3=82=92=E9=81=A9=E5=88=87=E3=81=AB?=
 =?UTF-8?q?=E6=8A=98=E3=82=8A=E8=BF=94=E3=81=99=E3=82=88=E3=81=86=E3=81=AB?=
 =?UTF-8?q?=20(#10222)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix(frontend): ユーザーページのバッジ表示を適切に折り返すように

* Update CHANGELOG.md
---
 CHANGELOG.md                              | 2 +-
 packages/frontend/src/pages/user/home.vue | 5 ++++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0f252eaaf..57cdd41e4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,7 +5,7 @@
 - 
 
 ### Bugfixes
--
+- ユーザーページのバッジ表示を適切に折り返すように @arrow2nd
 
 You should also include the user name that made the change.
 -->
diff --git a/packages/frontend/src/pages/user/home.vue b/packages/frontend/src/pages/user/home.vue
index 441b19440..02794175a 100644
--- a/packages/frontend/src/pages/user/home.vue
+++ b/packages/frontend/src/pages/user/home.vue
@@ -352,6 +352,9 @@ onUnmounted(() => {
 				> .roles {
 					padding: 24px 24px 0 154px;
 					font-size: 0.95em;
+					display: flex;
+					flex-wrap: wrap;
+					gap: 8px;
 
 					> .role {
 						border: solid 1px var(--color, var(--divider));
@@ -493,7 +496,7 @@ onUnmounted(() => {
 
 				> .roles {
 					padding: 16px 16px 0 16px;
-					text-align: center;
+					justify-content: center;
 				}
 
 				> .description {