From 3c5ce387368f5d0258d30200bdd6d92496eb50fd Mon Sep 17 00:00:00 2001
From: nanaya <me@nanaya.net>
Date: Wed, 11 Nov 2026 19:40:34 +0900
Subject: [PATCH] Improve badges alignment on profile page

---
 resources/css/bem/profile-badge.less  | 4 ++--
 resources/css/bem/profile-badges.less | 6 ++++--
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/resources/css/bem/profile-badge.less b/resources/css/bem/profile-badge.less
index 74cc5691324..cb62a25db2f 100644
--- a/resources/css/bem/profile-badge.less
+++ b/resources/css/bem/profile-badge.less
@@ -4,8 +4,8 @@
 .profile-badge {
   --pin-opacity: 0;
 
-  width: 86px;
-  height: 40px;
+  width: var(--badge-width);
+  height: var(--badge-height);
   position: relative;
 
   &:hover {
diff --git a/resources/css/bem/profile-badges.less b/resources/css/bem/profile-badges.less
index 52905760c2e..37be14cb197 100644
--- a/resources/css/bem/profile-badges.less
+++ b/resources/css/bem/profile-badges.less
@@ -3,10 +3,12 @@
 
 .profile-badges {
   .inner-shadow-top();
+  --badge-width: 86px;
+  --badge-height: 40px;
   --gutter: @gutter-v2;
   background-color: hsl(var(--hsl-b4));
-  display: flex;
-  flex-wrap: wrap;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(var(--badge-width), 1fr));
   gap: 10px;
   padding: 10px var(--gutter);