Wrap mod list in score page

The original structure was so mods don't really affect overall action
alignment but looking again it doesn't seem to really matter anyway.

Author: nanaya

resources/css/bem/score-player.less

@@ -2,17 +2,17 @@
 // See the LICENCE file in the repository root for full licence text.
 
 .score-player {
-  &__mod {
-    margin: 3px;
-    font-size: 22px; // icon size
-    flex: none;
+  width: 250px;
+  max-width: 100%;
+  @media @desktop {
+    width: auto;
   }
 
   &__mods {
-    margin: -3px;
+    font-size: 22px; // icon size
     display: flex;
-    position: absolute;
-    top: -5px;
+    flex-wrap: wrap;
+    gap: 2px;
   }
 
   &__row {
@@ -29,6 +29,10 @@
       grid-template-columns: max-content;
       grid-gap: 0 10px;
     }
+
+    &--score {
+      display: grid;
+    }
   }
 
   &__rank {
@@ -50,7 +54,7 @@
   &__score {
     font-size: @font-size--large-4;
     font-weight: 300;
-    margin-bottom: -10px;
+    line-height: 1;
     @media @desktop {
       font-size: @font-size--extra-large;
     }

resources/js/scores-show/player.tsx

@@ -28,17 +28,15 @@ export default function Player(props: Props) {
   return (
     <div className='score-player'>
       <div className='score-player__row score-player__row--score'>
-        <div className='score-player__score'>
-          {formatNumber(totalScore(props.score))}
-        </div>
-
         <div className='score-player__mods'>
           {filterMods(props.score).map((mod) => (
-            <div key={mod.acronym} className='score-player__mod'>
-              <Mod mod={mod} />
-            </div>
+            <Mod key={mod.acronym} mod={mod} />
           ))}
         </div>
+
+        <div className='score-player__score'>
+          {formatNumber(totalScore(props.score))}
+        </div>
       </div>
 
       <div className='score-player__row score-player__row--player'>