Removed MobileAlert and other tweaks

frontend/src/App.vue

@@ -4,7 +4,6 @@
 		<div v-else class="upper-container">
 			<router-view :key="$route.fullPath" class="main-container" />
 			<what-is-new />
-			<mobile-alert />
 			<login-modal v-if="modals.header.login" />
 			<register-modal v-if="modals.header.register" />
 		</div>
@@ -17,7 +16,6 @@ import Toast from "toasters";
 
 import Banned from "./pages/Banned.vue";
 import WhatIsNew from "./components/modals/WhatIsNew.vue";
-import MobileAlert from "./components/common/MobileAlert.vue";
 import LoginModal from "./components/modals/Login.vue";
 import RegisterModal from "./components/modals/Register.vue";
 import io from "./io";
@@ -26,7 +24,6 @@ import keyboardShortcuts from "./keyboardShortcuts";
 export default {
 	components: {
 		WhatIsNew,
-		MobileAlert,
 		LoginModal,
 		RegisterModal,
 		Banned

frontend/src/components/common/MobileAlert.vue

@@ -1,81 +0,0 @@
-<template>
-	<div class="modal" :class="{ 'is-active': isModalActive }">
-		<div class="modal-background" />
-		<div class="modal-card">
-			<header class="modal-card-head">
-				<button class="delete" @click="toggleModal()" />
-			</header>
-			<section class="modal-card-body">
-				<h5>
-					Musare doesn't work very well on mobile right now, we are
-					working on this!
-				</h5>
-			</section>
-		</div>
-	</div>
-</template>
-
-<script>
-export default {
-	data() {
-		return {
-			isModalActive: false
-		};
-	},
-	mounted() {
-		if (!localStorage.getItem("mobileOptimization")) {
-			this.toggleModal();
-			localStorage.setItem("mobileOptimization", true);
-		}
-	},
-	methods: {
-		toggleModal() {
-			this.isModalActive = !this.isModalActive;
-			if (this.isModalActive) {
-				setTimeout(() => {
-					this.isModalActive = false;
-				}, 4000);
-			}
-		}
-	},
-	events: {
-		closeModal() {
-			this.isModalActive = false;
-		}
-	}
-};
-</script>
-
-<style lang="scss" scoped>
-@import "../../styles/global.scss";
-
-@media (min-width: 735px) {
-	.modal {
-		display: none;
-	}
-}
-
-.modal-card {
-	margin: 0 20px !important;
-}
-
-.modal-card-head {
-	border-bottom: none;
-	background-color: ghostwhite;
-	padding: 15px;
-}
-
-.delete {
-	background: transparent;
-	right: 0;
-	position: absolute;
-	&:hover {
-		background: transparent;
-	}
-
-	&:before,
-	&:after {
-		background-color: #bbb;
-	}
-}
-</style>

frontend/src/components/modals/EditPlaylist/components/PlaylistSongItem.vue

@@ -1,7 +1,17 @@
 <template>
 	<div class="universal-item playlist-song-item">
 		<div id="thumbnail-and-info">
-			<img class="item-thumbnail" :src="song.thumbnail" />
+			<img
+				v-if="song.thumbnail"
+				class="item-thumbnail"
+				:src="song.thumbnail"
+				onerror="this.src='/assets/notes-transparent.png'"
+			/>
+			<img
+				v-else
+				class="item-thumbnail"
+				src="/assets/notes-transparent.png"
+			/>
 			<div id="song-info">
 				<h4 class="item-title" :title="song.title">
 					{{ song.title }}

frontend/src/components/modals/EditPlaylist/index.vue

@@ -730,7 +730,7 @@ export default {
 
 	.section {
 		padding: 15px !important;
-		margin: 0 20px;
+		margin: 0 10px;
 		max-width: 600px;
 		display: flex;
 		flex-direction: column;
@@ -747,7 +747,8 @@ export default {
 	}
 
 	#first-column {
-		max-width: 100%;
+		width: 50%;
+		flex-grow: 1;
 		height: 100%;
 		overflow-y: auto;
 
@@ -800,7 +801,7 @@ export default {
 	}
 
 	#second-column {
-		max-width: 100%;
+		width: 50%;
 		flex-grow: 1;
 		height: 100%;
 		overflow-y: auto;