Sidebar and tierlist changes

frontend/pages/champion/[alias].vue

@@ -20,19 +20,20 @@ function updateState(newState : string, newLane : number) {
         <Title>{{ championData.name }} - BuildPath</Title>
     </Head>
 
+    <div style="display: flex; min-height: 100vh; align-items: stretch; width: 100%;">
+
     <SideBar :champion-name="championData.name" 
         :champion-lanes="championData.lanes" 
         @state-change="updateState"/>
 
-    <!-- <div style="display: flex; width: fit-content; margin: auto; margin-left: 330px;"> -->
-    <div style="margin-top: 64px; margin-left: 339px;">
+    <div style="margin-top: 64px; margin-left: 39px; width: 100%;">
         <ChampionTitle v-if="championData.gameCount > 0" :champion-id="championId" :winrate="lane.winrate" :pickrate="lane.pickrate" :game-count="lane.count" />
         <RuneSelector v-if="state == 'runes' && championData.gameCount > 0" style="margin: auto; margin-top: 40px;" :runes="lane.runes!!" />
         <ItemViewer v-if="state == 'items' && championData.gameCount > 0" style="margin:auto; margin-top: 40px;" :builds="lane.builds!!" />
         <h2 v-if="championData.gameCount == 0" style="margin: auto; margin-top: 20px; width: fit-content;">Sorry, there is no data for this champion :(</h2>
     </div>
-    <!-- <ItemViewer v-if="championData.gameCount > 0" style="margin-top: 64px; margin-left: 64px;" :builds="championData.builds" /> -->
-    <!-- </div> -->
+
+    </div>
 </template>
 
 <style>