fix(ToolTips): lack of padding on station settings tooltips

Signed-off-by: Jonathan Graham <theflametrooper@gmail.com>

frontend/src/App.vue

@@ -440,6 +440,13 @@ a {
 			color: var(--black);
 		}
 
+		&[data-theme~="songActions"],
+		&[data-theme~="addToPlaylist"],
+		&[data-theme~="stationSettings"] {
+			background-color: var(--dark-grey-2);
+			border: 0 !important;
+		}
+
 		&[data-theme~="songActions"] {
 			background-color: var(--dark-grey-2);
 			border: 0 !important;
@@ -453,6 +460,7 @@ a {
 				background-color: var(--white);
 			}
 		}
+
 		&[data-theme~="addToPlaylist"] {
 			background-color: var(--dark-grey-2);
 			border: 0 !important;
@@ -484,7 +492,8 @@ a {
 
 	.tippy-box[data-placement^="bottom"] {
 		&[data-theme~="songActions"],
-		&[data-theme~="addToPlaylist"] {
+		&[data-theme~="addToPlaylist"],
+		&[data-theme~="stationSettings"] {
 			> .tippy-arrow::before {
 				border-bottom-color: var(--dark-grey-2);
 			}
@@ -604,7 +613,8 @@ a {
 
 .tippy-box[data-placement^="bottom"] {
 	&[data-theme~="songActions"],
-	&[data-theme~="addToPlaylist"] {
+	&[data-theme~="addToPlaylist"],
+	&[data-theme~="stationSettings"] {
 		> .tippy-arrow::before {
 			border-bottom-color: var(--white);
 		}
@@ -638,6 +648,16 @@ a {
 	}
 }
 
+.tippy-box[data-theme~="stationSettings"] {
+	border: 1px solid var(--light-grey-3);
+	box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+	background-color: var(--white);
+
+	button:not(:last-of-type) {
+		margin-bottom: 5px;
+	}
+}
+
 .tippy-box[data-theme~="addToPlaylist"] {
 	font-size: 15px;
 	padding: 5px;
@@ -645,7 +665,7 @@ a {
 	box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
 	background-color: var(--white);
 	color: var(--dark-grey);
-	width: max-content;
+	width: 100%;
 
 	.nav-dropdown-items {
 		.nav-item {

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

@@ -44,7 +44,7 @@
 				<label class="label">Theme</label>
 				<div class="button-wrapper">
 					<tippy
-						theme="addToPlaylist"
+						theme="stationSettings"
 						:interactive="true"
 						:touch="true"
 						placement="bottom"
@@ -97,7 +97,7 @@
 				<label class="label">Privacy</label>
 				<div class="button-wrapper">
 					<tippy
-						theme="addToPlaylist"
+						theme="stationSettings"
 						:interactive="true"
 						:touch="true"
 						placement="bottom"
@@ -150,7 +150,7 @@
 				<label class="label">Station Mode</label>
 				<div class="button-wrapper" v-if="station.type === 'community'">
 					<tippy
-						theme="addToPlaylist"
+						theme="stationSettings"
 						:interactive="true"
 						:touch="true"
 						placement="bottom"
@@ -206,7 +206,7 @@
 				<label class="label">Play Mode</label>
 				<div class="button-wrapper" v-if="station.type === 'community'">
 					<tippy
-						theme="addToPlaylist"
+						theme="stationSettings"
 						:interactive="true"
 						:touch="true"
 						placement="bottom"
@@ -268,7 +268,7 @@
 				<label class="label">Queue lock</label>
 				<div class="button-wrapper">
 					<tippy
-						theme="addToPlaylist"
+						theme="stationSettings"
 						:interactive="true"
 						:touch="true"
 						placement="bottom"
@@ -547,6 +547,10 @@ export default {
 		display: flex;
 		flex-direction: column;
 
+		* >>> .tippy-box[data-theme~="addToPlaylist"] .tippy-content > span {
+			max-width: 150px !important;
+		}
+
 		button {
 			width: 100%;
 			height: 36px;