From 7b9811c13bfcc9942eac539c093fd22e99e09bbb Mon Sep 17 00:00:00 2001
From: Valentin Kaelin <kalanehd@gmail.com>
Date: Wed, 2 Feb 2022 22:53:22 +0100
Subject: [PATCH] fix(overview): record stats responsive if > 999 games

---
 .../Summoner/Overview/SummonerStats.vue       | 36 +++++++++----------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/client/src/components/Summoner/Overview/SummonerStats.vue b/client/src/components/Summoner/Overview/SummonerStats.vue
index e4516f8..00afcb8 100644
--- a/client/src/components/Summoner/Overview/SummonerStats.vue
+++ b/client/src/components/Summoner/Overview/SummonerStats.vue
@@ -115,9 +115,9 @@
       </ul>
       <template v-if="leagueStatsByType('Ranked').length">
         <div class="flex items-baseline px-4 mt-3 text-xs font-semibold text-blue-300 uppercase">
-          <div class="w-2/4 text-base text-left text-blue-400">Ranked</div>
-          <div class="w-1/4">Winrate</div>
-          <div class="w-1/4">Record</div>
+          <div class="w-5/12 text-base text-left text-blue-400">Ranked</div>
+          <div class="w-3/12">Winrate</div>
+          <div class="w-4/12">Record</div>
         </div>
         <ul class="mt-1 text-gray-100">
           <li
@@ -126,12 +126,12 @@
             :class="{'bg-blue-760': index % 2 !== 0}"
             class="flex items-center justify-between px-4 py-1 leading-tight"
           >
-            <div class="w-2/4 text-left capitalize">{{ league.name.toLowerCase() }}</div>
+            <div class="w-5/12 text-left capitalize">{{ league.name.toLowerCase() }}</div>
             <div
               :class="calculateWinrate(league.wins, league.count).color"
-              class="w-1/4"
+              class="w-3/12"
             >{{ calculateWinrate(league.wins, league.count).winrate|percent }}</div>
-            <div class="w-1/4">
+            <div class="w-4/12">
               <span
                 :class="winLossColor(league.wins, league.losses).win"
                 class="font-semibold"
@@ -147,9 +147,9 @@
       </template>
       <template v-if="leagueStatsByType('Normal').length">
         <div class="flex items-baseline px-4 mt-3 text-xs font-semibold text-blue-300 uppercase">
-          <div class="w-2/4 text-base text-left text-blue-400">Normal</div>
-          <div class="w-1/4">Winrate</div>
-          <div class="w-1/4">Record</div>
+          <div class="w-5/12 text-base text-left text-blue-400">Normal</div>
+          <div class="w-3/12">Winrate</div>
+          <div class="w-4/12">Record</div>
         </div>
         <ul class="mt-1 text-gray-100">
           <li
@@ -158,12 +158,12 @@
             :class="{'bg-blue-760': index % 2 !== 0}"
             class="flex items-center justify-between px-4 py-1 leading-tight"
           >
-            <div class="w-2/4 text-left capitalize">{{ league.name.toLowerCase() }}</div>
+            <div class="w-5/12 text-left capitalize">{{ league.name.toLowerCase() }}</div>
             <div
               :class="calculateWinrate(league.wins, league.count).color"
-              class="w-1/4"
+              class="w-3/12"
             >{{ calculateWinrate(league.wins, league.count).winrate|percent }}</div>
-            <div class="w-1/4">
+            <div class="w-4/12">
               <span
                 :class="winLossColor(league.wins, league.losses).win"
                 class="font-semibold"
@@ -179,9 +179,9 @@
       </template>
 
       <div class="flex items-baseline px-4 mt-3 text-xs font-semibold text-blue-300 uppercase">
-        <div class="w-2/4 text-base text-left text-blue-400">Class</div>
-        <div class="w-1/4">Winrate</div>
-        <div class="w-1/4">Record</div>
+        <div class="w-5/12 text-base text-left text-blue-400">Class</div>
+        <div class="w-3/12">Winrate</div>
+        <div class="w-4/12">Record</div>
       </div>
       <ul class="mt-1 text-gray-100">
         <li
@@ -190,12 +190,12 @@
           :class="{'bg-blue-760': index % 2 !== 0}"
           class="flex items-center justify-between px-4 py-1 leading-tight"
         >
-          <div class="w-2/4 text-left capitalize">{{ championClass.id }}</div>
+          <div class="w-5/12 text-left capitalize">{{ championClass.id }}</div>
           <div
             :class="calculateWinrate(championClass.wins, championClass.count).color"
-            class="w-1/4"
+            class="w-3/12"
           >{{ calculateWinrate(championClass.wins, championClass.count).winrate|percent }}</div>
-          <div class="w-1/4">
+          <div class="w-4/12">
             <span
               :class="winLossColor(championClass.wins, championClass.losses).win"
               class="font-semibold"