chore: profile

src/views/PlayerProfileView.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="profile-view">
-    <div class="view-container" v-if="playerInfo && playerDataStatus == Status.Data.Loaded">
-      <div class="profile-sidebar">
+    <div class="profile-wrapper" v-if="playerInfo && playerDataStatus == Status.Data.Loaded">
+      <div class="profile-left">
         <div class="player-summary">
           <div class="summary-main">
             <img
@@ -189,10 +189,10 @@
         </div>
       </div>
 
-      <div class="profile-main">
+      <div class="profile-right">
+        <div class="profile-month-stats">
           <h3 class="main-header">STATYSTYKI AKTYWNOŚCI (30 OSTATNICH DNI)</h3>
 
-        <div class="main-month-stats">
           <div class="month-stats-box">
             <div class="month-stat">
               <div><img src="/images/icon-train.svg" width="30" alt="train icon" /></div>
@@ -234,6 +234,8 @@
           </div>
         </div>
 
+        <div class="profile-history-list">
+          <div class="list-header">
             <h3 class="main-header">OSTATNIA AKTYWNOŚĆ GRACZA</h3>
 
             <div class="history-menu">
@@ -246,6 +248,7 @@
                 {{ t(`profile.filters.${filterKey}`) }}
               </button>
             </div>
+          </div>
 
           <div class="history-list-box">
             <ul>
@@ -322,6 +325,7 @@
           </div>
         </div>
       </div>
+    </div>
 
     <div v-else-if="playerDataStatus == Status.Data.Loading">
       <Loading />
@@ -545,8 +549,10 @@ $tileColor: #181818;
 .profile-view {
   display: flex;
   justify-content: center;
+
   height: 100vh;
   min-height: 500px;
+  max-height: 2000px;
 }
 
 .no-data-found {
@@ -565,12 +571,11 @@ $tileColor: #181818;
   }
 }
 
-.view-container {
+.profile-wrapper {
   display: grid;
   grid-template-columns: 500px 1fr;
 
   gap: 1em;
-
   position: relative;
 
   max-width: var(--max-container-width);
@@ -580,14 +585,27 @@ $tileColor: #181818;
   text-align: center;
 }
 
-.view-container > div {
-  position: relative;
-}
-
-.profile-sidebar {
+.profile-left {
   display: flex;
   flex-direction: column;
   gap: 1em;
+  overflow: auto;
+}
+
+.profile-right {
+  display: grid;
+  grid-template-rows: auto 1fr;
+  gap: 0.5em;
+  overflow: auto;
+}
+
+.profile-month-stats {
+  overflow: hidden;
+}
+
+.profile-history-list {
+  overflow: auto;
+  height: 100%;
 }
 
 .player-stats {
@@ -633,22 +651,23 @@ $tileColor: #181818;
   margin-top: 1em;
 }
 
-.profile-main {
-  overflow: hidden;
-}
-
 .main-header {
   padding: 0.5em;
   background-color: $tileColor;
   margin-bottom: 0.5em;
-  border-radius: 0.5em;
+}
+
+.list-header {
+  position: sticky;
+  top: 0;
+  background-color: var(--clr-bg);
+  padding-bottom: 0.5em;
 }
 
 .month-stats-box {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 0.5em;
-  margin-bottom: 1em;
 }
 
 .month-stat {
@@ -689,10 +708,6 @@ $tileColor: #181818;
 }
 
 .history-list-box {
-  overflow: auto;
-  height: 650px;
-  margin-top: 1em;
-
   & > ul > li {
     display: flex;
     flex-direction: column;
@@ -707,11 +722,19 @@ $tileColor: #181818;
 }
 
 @include responsive.midScreen {
-  .view-container {
+  .profile-view {
+    height: auto;
+  }
+
+  .profile-wrapper {
     grid-template-columns: 1fr;
     max-width: 1000px;
   }
 
+  .history-list-box {
+    max-height: 100vh;
+  }
+
   .player-stats {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));

src/views/SceneryView.vue

@@ -236,6 +236,10 @@ function setViewMode(componentName: string) {
 }
 
 @include responsive.midScreen {
+  .scenery-view {
+    height: auto;
+  }
+  
   .scenery-wrapper {
     grid-template-columns: 1fr;
     gap: 0;