[S] Make b35 look better

AquaNet/src/components/MapDetails.svelte

@@ -23,13 +23,13 @@
       <div>
         <img src={`${DATA_HOST}/d/mai2/music/00${mapData[0].toString().padStart(6, '0').substring(2)}.png`} alt="" on:error={coverNotFound} />
         <div class="info">
-          <div class="firstline">
+          <div class="first-line">
             <div class="song-title">{meta.name ?? t("UserHome.UnknownSong")}</div>
             <span class={`lv level-${mapData[1] === 10 ? 3 : mapData[1]}`}>
               { mapRank }
             </span>
           </div>
-          <div>
+          <div class="second-line">
             <span class={`rank-${getMult(mapData[3], game)[2].toString()[0]}`}>
 
               <span class="rank-text">{("" + getMult(mapData[3], game)[2]).replace("p", "+")}</span>
@@ -54,7 +54,8 @@
     .map-detail-container
       background-color: rgb(35,35,35)
       border-radius: $border-radius
-      max-width: 250px
+      overflow: hidden
+
       .scores
         display: flex
         flex-direction: column
@@ -83,7 +84,7 @@
             overflow: hidden
             flex-direction: column
 
-            .firstline
+            .first-line
               display: flex
               flex-direction: row
 
@@ -123,13 +124,20 @@
             text-align: center
             background: rgba(var(--lv-color), 0.6)
             padding: 0 6px
-            border-radius: $border-radius
-            margin-right: 6px
+            border-radius: 0 $border-radius 0 $border-radius
+
+            // Inset shadow, like it's a paper below this card with a cut
+            box-shadow: inset 0 0 10px rgba(0,0,0,0.5)
 
           span
             display: inline-block
             text-align: left
 
+          .second-line
+            display: flex
+            justify-content: space-between
+            align-items: center
+
           // Vertical table-like alignment
           span.rank-text
             min-width: 40px
@@ -143,4 +151,3 @@
             content: "+"
           color: $c-good
   </style>
-  

AquaNet/src/pages/UserHome.svelte

@@ -233,10 +233,9 @@
 
     <div>
       <h2>B35</h2>
-      <div style="display: flex; flex-wrap: wrap; gap: 12px; item-align: center; align-content: flex-start">
+      <div class="b35">
         {#each d.user.ratingComposition.best35.split(",") as map}
-        <!-- TODO: fix flex: 1 0 -->
-          <div style="width:260px;">
+          <div>
             <MapDetails g={map} meta={allMusics[map.split(":")[0]]} game={game}/>
           </div>
         {/each}
@@ -529,4 +528,11 @@ $gap: 20px
         &:before
           content: "+"
         color: $c-good
+
+.b35
+  display: grid
+  // 3 columns
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr))
+  gap: $gap
+
 </style>