From dc0c6230ea98edf51cbe29e926d821b0b5ba0d13 Mon Sep 17 00:00:00 2001
From: Alberto Xamin <alberto@xamin.it>
Date: Sun, 29 Nov 2020 21:32:51 +0100
Subject: [PATCH] fix for smaller screen devices

---
 frontend/src/components/Lobby.vue    | 10 ++++------
 frontend/src/components/TinyHand.vue |  2 +-
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/Lobby.vue b/frontend/src/components/Lobby.vue
index 912e1ac..7df15f0 100644
--- a/frontend/src/components/Lobby.vue
+++ b/frontend/src/components/Lobby.vue
@@ -19,7 +19,7 @@
 					<Card :card="p.card" :class="{is_my_turn:p.is_my_turn}"/>
 					<Card v-if="p.character" :card="p.character" class="character tiny-character" @click.native="selectedInfo = [p.character]"/>
 					<tiny-hand :ncards="p.ncards" @click.native="drawFromPlayer(p.name)"/>
-					<span style="position:absolute;top:0;" class="center-stuff">{{getActionEmoji(p)}}</span>
+					<span style="position:absolute;top:10pt;" class="center-stuff">{{getActionEmoji(p)}}</span>
 					<div class="tiny-equipment">
 						<Card v-for="card in p.equipment" v-bind:key="card.name+card.number" :card="card" @click.native="selectedInfo = p.equipment"/>
 					</div>
@@ -239,24 +239,22 @@ export default {
 	top: 0;
 }
 .tiny-health {
-	position: absolute;
 	display: flex;
 	justify-content: space-evenly;
-	top: -16pt;
 	transform: scale(0.8);
-	right: 0;
-	left: 0;
+	margin-bottom: -4pt;
 }
 .tiny-equipment .card:nth-child(n+2) {
 	margin-top: -60pt;
 }
 .tiny-character {
 	position: absolute;
-	transform: scale(0.6) translate(-80px, -50px);
+	transform: scale(0.5) translate(-80px, -40px);
 	top: 0;
 }
 .players-table {
 	display: flex;
+	flex-wrap: wrap;
 	justify-content: space-evenly;
 	margin-bottom: 12pt;
 }
diff --git a/frontend/src/components/TinyHand.vue b/frontend/src/components/TinyHand.vue
index e882dc3..7b82c7e 100644
--- a/frontend/src/components/TinyHand.vue
+++ b/frontend/src/components/TinyHand.vue
@@ -1,5 +1,5 @@
 <template>
-	<div style="position:absolute;transform:scale(0.45);bottom:50pt;">
+	<div style="position:absolute;transform:scale(0.4);bottom:52pt;">
 		<div class="card back" v-for="(n, i) in ncards" :style="`position:absolute; transform:rotate(${(i-ncards/2)*2}deg) translate(${i*15}px,0);`" v-bind:key="n" :alt="i">
 			<h4 v-if="n==ncards">PewPew!</h4>
 			<div class="emoji" v-if="n==ncards">💥</div>