fix(Draggable): Styling issues

frontend/src/App.vue

@@ -1636,10 +1636,6 @@ h4.section-title {
 }
 
 /** Universial items e.g. playlist items, queue items, activity items */
-.item-draggable {
-	cursor: move;
-}
-
 .universal-item {
 	display: flex;
 	flex-direction: row;

frontend/src/components/AdvancedTable.vue

@@ -93,7 +93,7 @@ const columnDragOptions = ref({
 	ghostClass: "draggable-list-ghost",
 	filter: ".ignore-elements",
 	fallbackTolerance: 50,
-	draggable: ".item-draggable"
+	draggable: ".is-draggable"
 });
 const editingFilters = ref([]);
 const appliedFilters = ref([]);
@@ -1537,7 +1537,7 @@ watch(selectedRows, (newSelectedRows, oldSelectedRows) => {
 									:attributes="{
 										class: column => ({
 											sortable: column.sortable,
-											'item-draggable': column.draggable,
+											'is-draggable': column.draggable,
 											'nav-item': true
 										})
 									}"
@@ -1631,7 +1631,7 @@ watch(selectedRows, (newSelectedRows, oldSelectedRows) => {
 									}),
 									class: column => ({
 										sortable: column.sortable,
-										'item-draggable': column.draggable
+										'is-draggable': column.draggable
 									})
 								}"
 							>
@@ -1957,13 +1957,13 @@ watch(selectedRows, (newSelectedRows, oldSelectedRows) => {
 	.table-outer-container {
 		.table-container .table {
 			&,
-			thead th {
+			:deep(thead th) {
 				background-color: var(--dark-grey-3) !important;
 				color: var(--light-grey-2);
 			}
 
 			tr {
-				th,
+				:deep(th),
 				td {
 					border-color: var(--dark-grey) !important;
 					background-color: var(--dark-grey-3) !important;
@@ -1976,7 +1976,7 @@ watch(selectedRows, (newSelectedRows, oldSelectedRows) => {
 				&:hover,
 				&:focus,
 				&.highlighted {
-					th,
+					:deep(th),
 					td {
 						background-color: var(--dark-grey-4) !important;
 					}
@@ -2052,7 +2052,7 @@ watch(selectedRows, (newSelectedRows, oldSelectedRows) => {
 			border-collapse: separate;
 			table-layout: fixed;
 
-			thead {
+			:deep(thead) {
 				tr {
 					th {
 						height: 40px;
@@ -2153,7 +2153,7 @@ watch(selectedRows, (newSelectedRows, oldSelectedRows) => {
 		}
 
 		table {
-			thead tr,
+			:deep(thead tr),
 			tbody tr {
 				th,
 				td {
@@ -2200,7 +2200,7 @@ watch(selectedRows, (newSelectedRows, oldSelectedRows) => {
 			}
 
 			&.has-checkboxes {
-				thead,
+				:deep(thead),
 				tbody {
 					tr {
 						th,

frontend/src/components/Draggable.vue

@@ -123,7 +123,14 @@ const convertAttributes = item =>
 		:data-index="itemIndex"
 		:data-list="name"
 		v-bind="convertAttributes(item)"
+		class="draggable-item"
 	>
 		<slot name="item" :element="item"></slot>
 	</component>
 </template>
+
+<style>
+.draggable-item .is-draggable {
+	cursor: move;
+}
+</style>

frontend/src/components/PlaylistTabBase.vue

@@ -826,7 +826,7 @@ onMounted(() => {
 					>
 						<template #item="{ element }">
 							<playlist-item
-								class="item-draggable"
+								class="is-draggable"
 								:playlist="element"
 							>
 								<template #item-icon>

frontend/src/pages/Profile/Tabs/Playlists.vue

@@ -69,7 +69,7 @@ onMounted(() => {
 						"
 						:playlist="element"
 						:class="{
-							'item-draggable': isCurrentUser
+							'is-draggable': isCurrentUser
 						}"
 					>
 						<template #actions>