tweak player rows to work better on mobile devices

web-svelte/src/components/Player.svelte

@@ -10,12 +10,7 @@ function exitPlayer() {};
 
 function changeColour() {};
 
-function canLeave() {
+let canLeave = $myName == $hostName || name == $myName;
-	if ($myName == $hostName) {
-		return true;
-	};
-	return name == $myName;
-}
 </script>
 
 <div class="player" style="--colour: {colour};">
@@ -41,14 +36,19 @@ function canLeave() {
 
 	<!-- The player's name -->
 	<div class="player-name">
+		<span class="name">
 			{name}
+		</span>
 		{#if $myName == name}
-			(You)
+			<span class="player-indicator">
+				You
+			</span>
 		{/if}
 	</div>
 
+
 	<!-- Whether or not to show the kick Player button in the row -->
-	{#if canLeave()}
+	{#if canLeave}
 	<SciFiButton
 		background="#ff0000"
 		handler={exitPlayer}
@@ -64,6 +64,8 @@ function canLeave() {
 </div>
 
 <style lang="scss">
+@import "../styles/mixins";
+
 .player {
 	height: 70px;
 	display: flex;
@@ -72,6 +74,7 @@ function canLeave() {
 	background: rgba(255, 255, 255, 0.1);
 	border-radius: 10px;
 	margin: 10px;
+	max-width: 95%;
 
 	> div.player-colour {
 		margin: 10px;
@@ -84,6 +87,23 @@ function canLeave() {
 
 	> .player-name {
 		flex-grow: 1;
+		display: flex;
+		align-items: center;
+
+		.name {
+			flex-grow: 1;
+		}
+	}
+
+	.player-indicator {
+		border-radius: 5px;
+		background-color: #00aa00;
+		color: black;
+		padding: 5px 7px;
+	}
+
+	@include medium {
+		max-width: 47%;
 	}
 }
 </style>