Better mobile scroll

frontend/components/rune/Selector.vue

@@ -62,7 +62,8 @@ function runeSelect(index: number) {
         :secondaryStyleId="runes[currentlySelectedPage].secondaryStyle" 
         :selectionIds="runes[currentlySelectedPage].selections" />
     <div style="display: flex; margin-top: 20px; justify-content: center;">
-    <div v-for="(_, i) in runes" :class="'rune-selector-entry ' + (i == currentlySelectedPage ? 'rune-selector-entry-selected' : '')" @click="runeSelect(i)">
+    <div v-for="(_, i) in runes" @click="runeSelect(i)">
+        <div :class="'rune-selector-entry ' + (i == currentlySelectedPage ? 'rune-selector-entry-selected' : '')">
             <div class="rs-styles-container">
             <NuxtImg class="rs-style-img" v-if="primaryStyles[i] != null && primaryStyles[i] != undefined" 
                 style="margin: auto;" :src="CDRAGON_BASE + mapPath(primaryStyles[i].iconPath)" />
@@ -71,6 +72,7 @@ function runeSelect(index: number) {
             <NuxtImg class="rs-style-img" v-if="secondaryStyles[i] != null && secondaryStyles[i] != undefined" 
                 style="margin: auto;" :src="CDRAGON_BASE + mapPath(secondaryStyles[i].iconPath)" />
             </div>
+        </div>
         <h3 class="rs-pickrate">{{ (runes[i].pickrate * 100).toFixed(2) }}% pick.</h3>
     </div>
     </div>
@@ -100,7 +102,8 @@ function runeSelect(index: number) {
 }
 .rs-pickrate {
     text-align: center; 
-    margin-top: 10px;
+    margin-top: -40px;
+    padding-bottom: 40px;
 }
 @media only screen and (max-width: 650px) {
     .rune-selector-entry {
@@ -114,7 +117,8 @@ function runeSelect(index: number) {
         margin-top: 17px;
     }
     .rs-pickrate {
-        margin-top: 20px;
+        margin-top: 5px;
+        padding-bottom: 0px;
     }
     .rs-style-img {
         width: 24px;

frontend/pages/champion/[alias].vue

@@ -60,7 +60,7 @@ function updateState(newState : string, newLane : number) {
 <style>
 #alias-content-wrapper {
     display: flex; 
-    min-height: 100vh; 
+    /* min-height: 100vh;  */
     align-items: stretch; 
     width: 100%;
 
@@ -83,7 +83,8 @@ function updateState(newState : string, newLane : number) {
 @media only screen and (max-width: 1200px) {
     #alias-content-wrapper {
         flex-direction: column;
-        margin-bottom: 120px;
+        padding-bottom: 120px;
+        margin-top: 20px;
     }
 }
 </style>