Merge pull request #12882 from nanaya/medal-layout

Single column layout for user medals section

Author: notbakaneko

resources/css/bem/badge-achievement.less

@@ -18,7 +18,6 @@
 
   &--listing {
     width: 70px;
-    margin: auto;
   }
 
   &--recent {

resources/css/bem/medals-group.less

@@ -6,22 +6,19 @@
   gap: 20px;
 
   @media @desktop {
-    grid-template-columns: 1fr 1fr;
     gap: 40px;
   }
 
   &__group {
     .default-border-radius();
-    display: inline-flex;
-    flex-direction: column;
+    display: grid;
+    gap: 10px;
   }
 
-  &__medal {
-    min-width: (10px + 70px);
-    height: 76px;
-    width: 25%;
-    margin: 10px 0;
-    display: inline-block;
+  &__medals {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px 20px;
   }
 
   &__title {

resources/js/profile-page/medals.tsx

@@ -115,13 +115,12 @@ export default class Medals extends React.Component<ExtraPageProps> {
                 {[...groupedAchievements.entries()].map(([ordering, orderedAchievements]) => (
                   <div key={ordering} className='medals-group__medals'>
                     {orderedAchievements.map((ua) => (
-                      <div key={ua.achievement.id} className='medals-group__medal'>
-                        <AchievementBadge
-                          achievedAt={ua.userAchievement?.achieved_at}
-                          achievement={ua.achievement}
-                          modifiers='listing'
-                        />
-                      </div>
+                      <AchievementBadge
+                        key={ua.achievement.id}
+                        achievedAt={ua.userAchievement?.achieved_at}
+                        achievement={ua.achievement}
+                        modifiers='listing'
+                      />
                     ))}
                   </div>
                 ))}