chore(profile): improved responsiveness & design

src/components/PlayerProfileView/ProfileHistoryList.vue

@@ -214,7 +214,7 @@ async function fetchPlayerJournal() {
 @use '../../styles/responsive';
 
 .profile-history-list {
-  overflow: auto;
+  overflow-y: scroll;
   height: 100%;
 }
 
@@ -284,8 +284,8 @@ async function fetchPlayerJournal() {
 }
 
 @include responsive.midScreen {
-  .history-list-box {
-    max-height: 100vh;
+  .profile-history-list {
+    height: 100vh;
   }
 }
 </style>

src/components/PlayerProfileView/ProfileRecentStats.vue

@@ -60,6 +60,8 @@ defineProps({
 </script>
 
 <style lang="scss" scoped>
+@use '../../styles/responsive';
+
 .profile-recent-stats {
   overflow: hidden;
 }
@@ -90,4 +92,10 @@ defineProps({
     font-size: 0.9em;
   }
 }
+
+@include responsive.smallScreen {
+  .month-stats-box {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
 </style>

src/components/PlayerProfileView/ProfileSummary.vue

@@ -67,7 +67,6 @@
             class="player-activity"
             v-if="activeDispatches.length > 0 || activeTrains.length > 0"
           >
-
             <div class="info-activity" v-if="activeDispatches.length > 0">
               <router-link
                 v-for="d in activeDispatches"
@@ -361,4 +360,11 @@ const activeTrains = computed(() => {
     grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
   }
 }
+
+@include responsive.smallScreen {
+  .player-stats {
+    display: grid;
+    grid-template-columns: 1fr;
+  }
+}
 </style>

src/views/PlayerProfileView.vue

@@ -9,7 +9,7 @@
 
       <div class="profile-side">
         <ProfileRecentStats :playerInfo="playerInfo" />
-        <ProfileHistoryList  :playerName="playerName" />
+        <ProfileHistoryList :playerName="playerName" />
       </div>
     </div>
 
@@ -66,6 +66,7 @@ onMounted(() => {
 async function fetchAllData() {
   const playerId = route.query.playerId?.toString();
 
+  playerInfo.value = null;
   playerTD2Info.value = null;
   playerDataStatus.value = Status.Data.Loading;