improvement: various improvements for changes from last two PR's

frontend/src/App.vue

@@ -287,6 +287,10 @@ export default {
 		background-color: var(--dark-grey);
 		border-color: var(--grey-3);
 		color: var(--white);
+
+		&::placeholder {
+			color: var(--light-grey-3);
+		}
 	}
 
 	// &:last-of-type {

frontend/src/components/FloatingBox.vue

@@ -150,6 +150,8 @@ export default {
 	resize: both;
 	overflow: auto;
 	border: 1px solid var(--light-grey-2);
+	border-radius: 5px;
+	padding: 10px;
 	min-height: 50px !important;
 	min-width: 50px !important;
 

frontend/src/components/ReportInfoItem.vue

@@ -58,12 +58,6 @@ export default {
 };
 </script>
 
-<style lang="scss">
-.report-info-item .item-icon .profile-picture span {
-	font-size: 25px;
-}
-</style>
-
 <style lang="scss" scoped>
 .night-mode {
 	.report-info-item {
@@ -79,6 +73,12 @@ export default {
 		height: 45px;
 		margin-right: 10px;
 
+		/deep/ .profile-picture.using-initials span {
+			font-size: calc(
+				45px / 5 * 2
+			); // 2/5th of .profile-picture height/width
+		}
+
 		.profile-picture,
 		i {
 			width: 45px;

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

@@ -12,7 +12,7 @@
 					'custom-modal-body': true
 				}"
 			>
-				<div class="left-section">
+				<div class="first-section">
 					<div id="playlist-info-section" class="section">
 						<h3>{{ playlist.displayName }}</h3>
 						<h5>Song Count: {{ playlist.songs.length }}</h5>
@@ -77,7 +77,7 @@
 					</div>
 				</div>
 
-				<div class="right-section">
+				<div class="second-section">
 					<div id="rearrange-songs-section" class="section">
 						<div v-if="isEditable()">
 							<h4 class="section-title">Rearrange Songs</h4>
@@ -618,7 +618,7 @@ export default {
 	}
 
 	.edit-playlist-modal.modal .modal-card-body .custom-modal-body {
-		.left-section {
+		.first-section {
 			#playlist-info-section {
 				background-color: var(--dark-grey-3) !important;
 				border: 0;
@@ -635,7 +635,7 @@ export default {
 				}
 			}
 		}
-		.right-section .section {
+		.second-section .section {
 			border-radius: 5px;
 		}
 	}
@@ -710,7 +710,7 @@ export default {
 		&.view-only {
 			height: auto !important;
 
-			.left-section {
+			.first-section {
 				flex-basis: 100%;
 			}
 
@@ -744,7 +744,7 @@ export default {
 		width: 150px;
 	}
 
-	.left-section {
+	.first-section {
 		flex-basis: 550px;
 		height: 100%;
 		overflow-y: auto;
@@ -775,7 +775,7 @@ export default {
 		}
 	}
 
-	.right-section {
+	.second-section {
 		flex-basis: 650px;
 		height: 100%;
 		overflow-y: auto;

frontend/src/pages/Admin/index.vue

@@ -240,7 +240,6 @@ export default {
 
 .main-container {
 	height: auto;
-	margin-bottom: 10px;
 }
 
 .tabs {