fix: Various issues after merging origin

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

@@ -661,26 +661,26 @@ export default {
 	}
 }
 
-.edit-playlist-modal .modal-card-body .custom-modal-body {
-	display: flex;
-	flex-wrap: wrap;
-	height: 100%;
+.edit-playlist-modal.view-only .modal-card-body {
+	height: auto !important;
 
-	&.view-only {
-		height: auto !important;
-
-		.left-section {
-			flex-basis: 100%;
-		}
+	.left-section {
+		flex-basis: 100%;
+	}
 
-		.right-section {
-			max-height: unset !important;
-		}
+	.right-section {
+		max-height: unset !important;
+	}
 
-		/deep/ .section {
-			max-width: 100% !important;
-		}
+	/deep/ .section {
+		max-width: 100% !important;
 	}
+}
+
+.edit-playlist-modal .modal-card-body {
+	display: flex;
+	flex-wrap: wrap;
+	height: 100%;
 
 	.nothing-here-text {
 		display: flex;
@@ -697,7 +697,53 @@ export default {
 		width: 150px;
 	}
 
+	.section {
+		display: flex;
+		flex-direction: column;
+		flex-grow: 1;
+		width: auto;
+		padding: 15px !important;
+		margin: 0 10px;
+	}
+
 	.left-section {
+		.tabs-container {
+			padding: 15px 0 !important;
+			margin: 0 10px;
+
+			.tab-selection {
+				display: flex;
+				overflow-x: auto;
+
+				.button {
+					border-radius: 5px 5px 0 0;
+					border: 0;
+					text-transform: uppercase;
+					font-size: 14px;
+					color: var(--dark-grey-3);
+					background-color: var(--light-grey-2);
+					flex-grow: 1;
+					height: 32px;
+
+					&:not(:first-of-type) {
+						margin-left: 5px;
+					}
+				}
+
+				.selected {
+					background-color: var(--primary-color) !important;
+					color: var(--white) !important;
+					font-weight: 600;
+				}
+			}
+			.tab {
+				border: 1px solid var(--light-grey-3);
+				padding: 15px;
+				border-radius: 0 0 5px 5px;
+				margin: 0;
+			}
+		}
+
 		#playlist-info-section {
 			border: 1px solid var(--light-grey-3);
 			border-radius: 3px;
@@ -727,14 +773,4 @@ export default {
 		}
 	}
 }
-
-@media screen and (max-width: 1100px) {
-	.edit-playlist-modal.modal .modal-card-body .custom-modal-body {
-		.left-section,
-		.right-section {
-			flex-basis: 100%;
-			height: auto;
-		}
-	}
-}
 </style>

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

@@ -5,16 +5,7 @@
 				<div class="left-section">
 					<div class="top-section">
 						<div class="player-section">
-							<div id="video-container">
-								<div
-									id="editSongPlayer"
-									style="
-										width: 100%;
-										height: 100%;
-										min-height: 200px;
-									"
-								/>
-							</div>
+							<div id="editSongPlayer" />
 
 							<div v-show="youtubeError" class="player-error">
 								<h2>{{ youtubeErrorMessage }}</h2>
@@ -75,7 +66,6 @@
 									</button>
 								</div>
 								<div class="player-footer-center">
-									<img src="/assets/social/youtube.svg" />
 									<span>
 										<span>
 											{{ youtubeVideoCurrentTime }}
@@ -125,6 +115,13 @@
 								</div>
 							</div>
 						</div>
+						<img
+							class="thumbnail-preview"
+							:src="song.thumbnail"
+							onerror="this.src='/assets/notes-transparent.png'"
+							ref="thumbnailElement"
+							v-if="songDataLoaded"
+						/>
 					</div>
 
 					<div class="edit-section" v-if="songDataLoaded">
@@ -193,17 +190,10 @@
 							</div>
 						</div>
 
-						<div class="control is-grouped album-art-container">
-							<label class="label">Album art</label>
-
-							<div>
-								<img
-									class="thumbnail-preview"
-									:src="song.thumbnail"
-									onerror="this.src='/assets/notes-transparent.png'"
-									ref="thumbnailElement"
-									v-if="songDataLoaded"
-								/>
+						<div class="control is-grouped">
+							<div class="album-art-container">
+								<label class="label">Album art</label>
+
 								<p class="control has-addons">
 									<input
 										class="input"
@@ -939,8 +929,8 @@ export default {
 							this.video.player = new window.YT.Player(
 								"editSongPlayer",
 								{
-									height: 270,
-									width: 480,
+									height: 298,
+									width: 530,
 									videoId: this.song.youtubeId,
 									host: "https://www.youtube-nocookie.com",
 									playerVars: {
@@ -1584,16 +1574,6 @@ export default {
 };
 </script>
 
-<style lang="scss">
-#editSongPlayer {
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-}
-</style>
-
 <style lang="scss" scoped>
 .night-mode {
 	.edit-section,
@@ -1630,21 +1610,17 @@ export default {
 .left-section {
 	flex-basis: unset !important;
 
-	@media screen and (max-width: 1245px) {
-		flex-grow: 1 !important;
-	}
-
 	.top-section {
 		display: flex;
-		flex-direction: column;
 
 		.player-section {
+			width: 530px;
 			display: flex;
 			flex-direction: column;
 
 			.player-error {
 				height: 318px;
-				// width: 530px;
+				width: 530px;
 				display: block;
 				border: 1px rgba(163, 224, 255, 0.75) solid;
 				border-radius: 5px 5px 0px 0px;
@@ -1659,22 +1635,17 @@ export default {
 				}
 			}
 
-			#durationCanvas {
-				max-width: 100%;
-			}
-
 			.player-footer {
 				border: 1px solid var(--light-grey-3);
 				border-radius: 0px 0px 3px 3px;
 				display: flex;
 				justify-content: space-between;
-				padding: 10px;
-				width: 100%;
-				background-color: var(--white);
-				flex-direction: column;
-				flex-flow: wrap;
+				height: 54px;
+				padding-left: 10px;
+				padding-right: 10px;
 
 				> * {
+					width: 33.3%;
 					display: flex;
 					align-items: center;
 				}
@@ -1695,7 +1666,7 @@ export default {
 					justify-content: center;
 					align-items: center;
 					flex: 2;
-					font-size: 21px;
+					font-size: 18px;
 					font-weight: 400;
 					width: 200px;
 					margin: 0 5px;
@@ -1816,10 +1787,18 @@ export default {
 				}
 			}
 		}
+
+		.thumbnail-preview {
+			width: 189px;
+			height: 189px;
+			margin-left: 16px;
+		}
 	}
 
 	.edit-section {
+		width: 735px;
 		border: 1px solid var(--light-grey-3);
+		flex: 1;
 		margin-top: 16px;
 		border-radius: 3px;
 
@@ -1881,26 +1860,7 @@ export default {
 		}
 
 		.album-art-container {
-			display: flex;
-			flex-direction: column;
-
-			div {
-				display: flex;
-				flex-direction: row;
-				align-items: center;
-
-				.thumbnail-preview {
-					border: 1px solid var(--light-grey-3);
-
-					width: 75px;
-					height: 75px;
-				}
-
-				.control {
-					margin-left: 20px;
-					width: 100%;
-				}
-			}
+			width: 100%;
 		}
 
 		.artists-container {
@@ -2022,15 +1982,12 @@ export default {
 	flex-basis: unset !important;
 	flex-grow: 0 !important;
 
-	@media screen and (max-width: 1245px) {
-		height: inherit !important;
-	}
-
 	#tabs-container {
+		width: 376px;
+		background-color: var(--light-grey);
+		border: 1px rgba(163, 224, 255, 0.75) solid;
+		border-radius: 5px;
 		overflow: auto;
-		display: flex;
-		flex-direction: column;
-		flex-grow: 1;
 
 		#tab-selection {
 			display: flex;