Use .menu styling for other menu-y things

src/components/sidebar/PlayerList.vue

@@ -17,7 +17,7 @@
 <template>
 	<section class="sidebar__section sidebar__section--players">
 		<span class="section__heading">{{ heading }} [{{ players.size }}/{{ maxPlayers }}]</span>
-		<ul class="section__content">
+		<ul class="section__content menu">
 			<PlayerListItem v-for="[account, player] in players" :key="account" :player="player"></PlayerListItem>
 			<li v-if="!players.size" class="section__skeleton">{{ skeletonPlayers }}</li>
 		</ul>

src/components/sidebar/PlayerListItem.vue

@@ -104,13 +104,6 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 	.player {
-		position: relative;
-		display: block;
-		line-height: 3rem;
-		text-overflow: ellipsis;
-		overflow: hidden;
-		white-space: nowrap;
-
 		.player__icon {
 			position: absolute;
 			display: block;
@@ -123,12 +116,7 @@ export default defineComponent({
 		}
 
 		.player__name {
-			padding: 0.8rem 0 0.7rem 3.5rem;
-			text-align: left;
-			margin: 0;
-			width: 100%;
-			height: 100%;
-			min-height: 3.2rem;
+			padding-left: 3.5rem;
 		}
 
 		&.player--hidden {

src/components/sidebar/ServerList.vue

@@ -17,7 +17,7 @@
 <template>
 	<section class="sidebar__section" v-if="servers.size > 1">
 		<span class="section__heading">{{ heading }}</span>
-		<ul class="section__content">
+		<ul class="section__content menu">
 			<ServerListItem :server="server" v-for="[name, server] in servers" :key="name"></ServerListItem>
 		</ul>
 	</section>
@@ -46,7 +46,3 @@ export default defineComponent({
 });
 
 </script>
-
-<style scoped>
-
-</style>

src/components/sidebar/ServerListItem.vue

@@ -50,20 +50,3 @@ export default defineComponent({
 	}
 });
 </script>
-
-<style lang="scss" scoped>
-	@import '../../scss/placeholders';
-
-	.server {
-		height: 3.2rem;
-
-		button {
-			@extend %button;
-			text-align: left;
-			display: block;
-			height: 100%;
-			width: 100%;
-			border-radius: 0.5rem;
-		}
-	}
-</style>

src/scss/style.scss

@@ -154,14 +154,19 @@ input {
 	> li {
 		display: flex;
 		padding: 0.8rem 0.8rem 0.7rem;
+		position: relative;
 		margin: 0 !important;
 
 		> button {
+			text-overflow: ellipsis;
+			overflow: hidden;
+			white-space: nowrap;
 			margin: -0.8rem -0.8rem -0.7rem;
 			padding: 0.8rem 0.8rem 0.7rem;
 			text-align: left;
 			flex-grow: 1;
 			min-height: 3.2rem;
+			border-radius: 0.5rem;
 		}
 	}
 }