Fixed styling for genres and blacklisted genres when creating an offical station on /admin/stations

frontend/components/Admin/Stations.vue

@@ -53,24 +53,28 @@
 					<p class='control is-expanded'>
 						<input class='input' type='text' placeholder='Short description' v-model='newStation.description'>
 					</p>
-					<label class='label'>Genres</label>
-					<p class='control has-addons'>
-						<input class='input' id='new-genre' type='text' placeholder='Genre' v-on:keyup.enter='addGenre()'>
-						<a class='button is-info' href='#' @click='addGenre()'>Add genre</a>
-					</p>
-					<span class='tag is-info' v-for='(index, genre) in newStation.genres' track-by='$index'>
-						{{ genre }}
-						<button class='delete is-info' @click='removeGenre(index)'></button>
-					</span>
-					<label class='label'>Blacklisted Genres</label>
-					<p class='control has-addons'>
-						<input class='input' id='new-blacklisted-genre' type='text' placeholder='Blacklisted Genre' v-on:keyup.enter='addBlacklistedGenre()'>
-						<a class='button is-info' href='#' @click='addBlacklistedGenre()'>Add blacklisted genre</a>
-					</p>
-					<span class='tag is-info' v-for='(index, genre) in newStation.blacklistedGenres' track-by='$index'>
-						{{ genre }}
-						<button class='delete is-info' @click='removeBlacklistedGenre(index)'></button>
-					</span>
+					<div class="control is-grouped genre-wrapper">
+						<div class="sector">
+							<p class='control has-addons'>
+								<input class='input' id='new-genre' type='text' placeholder='Genre' v-on:keyup.enter='addGenre()'>
+								<a class='button is-info' href='#' @click='addGenre()'>Add genre</a>
+							</p>
+							<span class='tag is-info' v-for='(index, genre) in newStation.genres' track-by='$index'>
+								{{ genre }}
+								<button class='delete is-info' @click='removeGenre(index)'></button>
+							</span>
+						</div>
+						<div class="sector">
+							<p class='control has-addons'>
+								<input class='input' id='new-blacklisted-genre' type='text' placeholder='Blacklisted Genre' v-on:keyup.enter='addBlacklistedGenre()'>
+								<a class='button is-info' href='#' @click='addBlacklistedGenre()'>Add blacklisted genre</a>
+							</p>
+							<span class='tag is-info' v-for='(index, genre) in newStation.blacklistedGenres' track-by='$index'>
+								{{ genre }}
+								<button class='delete is-info' @click='removeBlacklistedGenre(index)'></button>
+							</span>
+						</div>
+					</div>
 				</div>
 			</div>
 			<footer class='card-footer'>
@@ -193,7 +197,12 @@
 </script>
 
 <style lang='scss' scoped>
-	.tag:not(:last-child) { margin-right: 5px; }
+	.tag {
+		margin-top: 5px;
+		&:not(:last-child) {
+			margin-right: 5px;
+		}
+	}
 
 	td {
 		word-wrap: break-word;
@@ -202,4 +211,9 @@
 	}
 
 	.is-info:focus { background-color: #0398db; }
+
+	.genre-wrapper {
+		display: flex;
+    	justify-content: space-around;
+	}
 </style>