fix(Admin Area): Minor styling improvements

frontend/src/pages/Admin/index.vue

@@ -227,6 +227,29 @@ export default {
 };
 </script>
 
+<style lang="scss">
+.main-container .container {
+	.search-songs {
+		margin-bottom: 5px;
+	}
+	.button-row {
+		display: flex;
+		flex-direction: row;
+		flex-wrap: wrap;
+		justify-content: center;
+		margin-bottom: 5px;
+
+		& > .button,
+		& > span {
+			margin: 5px 0;
+			&:not(:first-child) {
+				margin-left: 5px;
+			}
+		}
+	}
+}
+</style>
+
 <style lang="scss" scoped>
 .night-mode {
 	.tabs {

frontend/src/pages/Admin/tabs/HiddenSongs.vue

@@ -10,28 +10,31 @@
 			<input
 				v-model="searchQuery"
 				type="text"
-				class="input"
+				class="input search-songs"
 				placeholder="Search for Songs"
 			/>
-			<button
-				v-if="!loadAllSongs"
-				class="button is-primary"
-				@click="loadAll()"
-			>
-				Load all
-			</button>
-			<button
-				class="button is-primary"
-				@click="toggleKeyboardShortcutsHelper"
-				@dblclick="resetKeyboardShortcutsHelper"
-			>
-				Keyboard shortcuts helper
-			</button>
-			<button class="button is-primary" @click="openModal('requestSong')">
-				Request song
-			</button>
-			<br />
-			<br />
+			<div class="button-row">
+				<button
+					v-if="!loadAllSongs"
+					class="button is-primary"
+					@click="loadAll()"
+				>
+					Load all sets
+				</button>
+				<button
+					class="button is-primary"
+					@click="toggleKeyboardShortcutsHelper"
+					@dblclick="resetKeyboardShortcutsHelper"
+				>
+					Keyboard shortcuts helper
+				</button>
+				<button
+					class="button is-primary"
+					@click="openModal('requestSong')"
+				>
+					Request song
+				</button>
+			</div>
 			<table class="table is-striped">
 				<thead>
 					<tr>

frontend/src/pages/Admin/tabs/News.vue

@@ -2,6 +2,11 @@
 	<div>
 		<page-metadata title="Admin | News" />
 		<div class="container">
+			<div class="button-row">
+				<button class="is-primary button" @click="edit()">
+					Create News Item
+				</button>
+			</div>
 			<table class="table is-striped">
 				<thead>
 					<tr>
@@ -40,10 +45,6 @@
 					</tr>
 				</tbody>
 			</table>
-
-			<button class="is-primary button" @click="edit()">
-				Create News Item
-			</button>
 		</div>
 
 		<edit-news

frontend/src/pages/Admin/tabs/Playlists.vue

@@ -2,38 +2,38 @@
 	<div>
 		<page-metadata title="Admin | Playlists" />
 		<div class="container">
-			<button
-				class="button is-primary"
-				@click="deleteOrphanedStationPlaylists()"
-			>
-				Delete orphaned station playlists
-			</button>
-			<button
-				class="button is-primary"
-				@click="deleteOrphanedGenrePlaylists()"
-			>
-				Delete orphaned genre playlists
-			</button>
-			<button
-				class="button is-primary"
-				@click="requestOrphanedPlaylistSongs()"
-			>
-				Request orphaned playlist songs
-			</button>
-			<button
-				class="button is-primary"
-				@click="clearAndRefillAllStationPlaylists()"
-			>
-				Clear and refill all station playlists
-			</button>
-			<button
-				class="button is-primary"
-				@click="clearAndRefillAllGenrePlaylists()"
-			>
-				Clear and refill all genre playlists
-			</button>
-			<br />
-			<br />
+			<div class="button-row">
+				<button
+					class="button is-primary"
+					@click="deleteOrphanedStationPlaylists()"
+				>
+					Delete orphaned station playlists
+				</button>
+				<button
+					class="button is-primary"
+					@click="deleteOrphanedGenrePlaylists()"
+				>
+					Delete orphaned genre playlists
+				</button>
+				<button
+					class="button is-primary"
+					@click="requestOrphanedPlaylistSongs()"
+				>
+					Request orphaned playlist songs
+				</button>
+				<button
+					class="button is-primary"
+					@click="clearAndRefillAllStationPlaylists()"
+				>
+					Clear and refill all station playlists
+				</button>
+				<button
+					class="button is-primary"
+					@click="clearAndRefillAllGenrePlaylists()"
+				>
+					Clear and refill all genre playlists
+				</button>
+			</div>
 			<table class="table is-striped">
 				<thead>
 					<tr>

frontend/src/pages/Admin/tabs/Stations.vue

@@ -2,11 +2,14 @@
 	<div>
 		<page-metadata title="Admin | Stations" />
 		<div class="container">
-			<button class="button is-primary" @click="clearEveryStationQueue()">
-				Clear every station queue
-			</button>
-			<br />
-			<br />
+			<div class="button-row">
+				<button
+					class="button is-primary"
+					@click="clearEveryStationQueue()"
+				>
+					Clear every station queue
+				</button>
+			</div>
 			<table class="table is-striped">
 				<thead>
 					<tr>

frontend/src/pages/Admin/tabs/UnverifiedSongs.vue

@@ -10,28 +10,31 @@
 			<input
 				v-model="searchQuery"
 				type="text"
-				class="input"
+				class="input search-songs"
 				placeholder="Search for Songs"
 			/>
-			<button
-				v-if="!loadAllSongs"
-				class="button is-primary"
-				@click="loadAll()"
-			>
-				Load all
-			</button>
-			<button
-				class="button is-primary"
-				@click="toggleKeyboardShortcutsHelper"
-				@dblclick="resetKeyboardShortcutsHelper"
-			>
-				Keyboard shortcuts helper
-			</button>
-			<button class="button is-primary" @click="openModal('requestSong')">
-				Request song
-			</button>
-			<br />
-			<br />
+			<div class="button-row">
+				<button
+					v-if="!loadAllSongs"
+					class="button is-primary"
+					@click="loadAll()"
+				>
+					Load all sets
+				</button>
+				<button
+					class="button is-primary"
+					@click="toggleKeyboardShortcutsHelper"
+					@dblclick="resetKeyboardShortcutsHelper"
+				>
+					Keyboard shortcuts helper
+				</button>
+				<button
+					class="button is-primary"
+					@click="openModal('requestSong')"
+				>
+					Request song
+				</button>
+			</div>
 			<table class="table is-striped">
 				<thead>
 					<tr>

frontend/src/pages/Admin/tabs/Users.vue

@@ -204,6 +204,15 @@ body {
 	font-family: "Hind", sans-serif;
 }
 
+h2 {
+	font-size: 30px;
+	text-align: center;
+
+	@media only screen and (min-width: 700px) {
+		font-size: 35px;
+	}
+}
+
 .profile-picture {
 	max-width: 50px !important;
 	max-height: 50px !important;

frontend/src/pages/Admin/tabs/VerifiedSongs.vue

@@ -10,39 +10,40 @@
 			<input
 				v-model="searchQuery"
 				type="text"
-				class="input"
+				class="input search-songs"
 				placeholder="Search for Songs"
 			/>
-			<button
-				v-if="!loadAllSongs"
-				class="button is-primary"
-				@click="loadAll()"
-			>
-				Load all
-			</button>
-			<button
-				class="button is-primary"
-				@click="toggleKeyboardShortcutsHelper"
-				@dblclick="resetKeyboardShortcutsHelper"
-			>
-				Keyboard shortcuts helper
-			</button>
-			<button class="button is-primary" @click="openModal('requestSong')">
-				Request song
-			</button>
-			<button class="button is-primary" @click="openModal('importAlbum')">
-				Import album
-			</button>
-			<confirm placement="bottom" @confirm="updateAllSongs()">
+			<div class="button-row">
 				<button
-					class="button is-danger"
-					content="Update all songs"
-					v-tippy
+					v-if="!loadAllSongs"
+					class="button is-primary"
+					@click="loadAll()"
 				>
-					Update all songs
+					Load all sets
 				</button>
-			</confirm>
-			<br />
+				<button
+					class="button is-primary"
+					@click="toggleKeyboardShortcutsHelper"
+					@dblclick="resetKeyboardShortcutsHelper"
+				>
+					Keyboard shortcuts helper
+				</button>
+				<button
+					class="button is-primary"
+					@click="openModal('requestSong')"
+				>
+					Request song
+				</button>
+				<button
+					class="button is-primary"
+					@click="openModal('importAlbum')"
+				>
+					Import album
+				</button>
+				<confirm placement="bottom" @confirm="updateAllSongs()">
+					<button class="button is-danger">Update all songs</button>
+				</confirm>
+			</div>
 			<div>
 				<input
 					type="text"