EditPlaylist/ManageStation left/right section sizing fixes

frontend/src/components/modals/EditPlaylist/Tabs/Settings.vue

@@ -1,16 +1,7 @@
 <template>
 	<div class="settings-tab section">
 		<div v-if="isEditable()">
-			<h4 class="section-title">Edit Details</h4>
-
-			<p class="section-description">
-				Change the display name and privacy of the playlist.
-			</p>
-
-			<hr class="section-horizontal-rule" />
-
 			<label class="label"> Change display name </label>
-
 			<div class="control is-grouped input-with-button">
 				<p class="control is-expanded">
 					<input

frontend/src/components/modals/EditPlaylist/Tabs/Youtube.vue

@@ -1,13 +1,5 @@
 <template>
 	<div class="youtube-tab section">
-		<h4 class="section-title">Import from YouTube</h4>
-
-		<p class="section-description">
-			Import a playlist or song by searching or using a link from YouTube.
-		</p>
-
-		<hr class="section-horizontal-rule" />
-
 		<label class="label">
 			Search for a playlist from YouTube
 		</label>

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

@@ -9,18 +9,18 @@
 			slot="body"
 			:class="{
 				'view-only': !isEditable(),
-				'edit-playlist-modal-inner-container': true
+				'custom-modal-body': true
 			}"
 		>
-			<div id="first-column">
+			<div class="left-section">
 				<div id="playlist-info-section" class="section">
 					<h3>{{ playlist.displayName }}</h3>
 					<h5>Song Count: {{ playlist.songs.length }}</h5>
 					<h5>Duration: {{ totalLength() }}</h5>
 				</div>
 
-				<div id="tabs-container">
-					<div id="tab-selection">
+				<div class="section tabs-container">
+					<div class="tab-selection">
 						<button
 							class="button is-default"
 							:class="{ selected: tab === 'settings' }"
@@ -59,15 +59,9 @@
 						v-if="isEditable()"
 					/>
 				</div>
-
-				<!--
-
-				<div
-					id="import-from-youtube-section"
-					 -->
 			</div>
 
-			<div id="second-column">
+			<div class="right-section">
 				<div id="rearrange-songs-section" class="section">
 					<div v-if="isEditable()">
 						<h4 class="section-title">Rearrange Songs</h4>
@@ -596,68 +590,16 @@ export default {
 	}
 }
 
-@media screen and (max-width: 1300px) {
-	.edit-playlist-modal .edit-playlist-modal-inner-container {
-		height: auto !important;
-
-		/deep/ .section {
-			max-width: 100% !important;
-		}
-	}
-}
-
-#tabs-container {
-	// padding: 16px;
-
-	#tab-selection {
-		display: flex;
-		overflow-x: auto;
-		margin: 24px 10px 0 10px;
-
-		.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;
-	}
-}
-
-.edit-playlist-modal {
-	.edit-playlist-modal-inner-container {
-		display: flex;
-		flex-wrap: wrap;
-		height: 100%;
-
-		&.view-only {
-			height: auto !important;
+.edit-playlist-modal .modal-card-body .custom-modal-body {
+	display: flex;
+	flex-wrap: wrap;
+	height: 100%;
 
-			#first-column {
-				flex-basis: 100%;
-			}
+	&.view-only {
+		height: auto !important;
 
-			/deep/ .section {
-				max-width: 100% !important;
-			}
+		.left-section {
+			flex-basis: 100%;
 		}
 	}
 
@@ -667,15 +609,6 @@ export default {
 		justify-content: center;
 	}
 
-	/deep/ .section {
-		padding: 15px !important;
-		margin: 0 10px;
-		max-width: 600px;
-		display: flex;
-		flex-direction: column;
-		flex-grow: 1;
-	}
-
 	.label {
 		font-size: 1rem;
 		font-weight: normal;
@@ -685,14 +618,54 @@ export default {
 		width: 150px;
 	}
 
-	#first-column {
-		max-width: 100%;
+	.section {
+		display: flex;
+		flex-direction: column;
+		flex-grow: 1;
+		width: auto;
+		padding: 15px !important;
+		margin: 0 10px;
+	}
+
+	.left-section {
+		flex-basis: 50%;
 		height: 100%;
 		overflow-y: auto;
 		flex-grow: 1;
 
-		/deep/ .section {
-			width: auto;
+		.tabs-container {
+			padding: 15px 0 !important;
+			.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 {
@@ -716,11 +689,21 @@ export default {
 		}
 	}
 
-	#second-column {
-		max-width: 100%;
+	.right-section {
+		flex-basis: 50%;
 		height: 100%;
 		overflow-y: auto;
 		flex-grow: 1;
 	}
 }
+
+@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/ManageStation/index.vue

@@ -604,6 +604,7 @@ export default {
 		flex-grow: 1;
 
 		.tabs-container {
+			padding: 15px 0 !important;
 			.tab-selection {
 				display: flex;
 				overflow-x: auto;
@@ -673,7 +674,7 @@ export default {
 	.manage-station-modal.modal .modal-card-body .custom-modal-body {
 		.left-section,
 		.right-section {
-			flex-basis: unset;
+			flex-basis: 100%;
 			height: auto;
 		}
 	}