refactor: Moved polyfill logic to draggable component and fixed css issues

frontend/src/App.vue

@@ -307,7 +307,6 @@ onMounted(async () => {
 @import "normalize.css/normalize.css";
 @import "tippy.js/dist/tippy.css";
 @import "tippy.js/animations/scale.css";
-@import "mobile-drag-drop/default.css";
 
 :root {
 	--primary-color: var(--blue);
@@ -578,6 +577,8 @@ body {
 	line-height: 1.4285714;
 	font-size: 1rem;
 	font-family: "Inter", Helvetica, Arial, sans-serif;
+	max-width: 100%;
+	overflow-x: hidden;
 }
 
 .app {

frontend/src/components/Draggable.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+/* eslint-disable import/first */
 import { PropType, Slot as SlotType, watch, onMounted, ref } from "vue";
 
 const props = defineProps({
@@ -189,6 +190,28 @@ const hasSlotContent = (slot: SlotType | undefined, slotProps = {}) => {
 };
 </script>
 
+<script lang="ts">
+import { polyfill as mobileDragDropPolyfill } from "mobile-drag-drop";
+import { scrollBehaviourDragImageTranslateOverride as mobileDragDropScrollBehaviourDragImageTranslateOverride } from "mobile-drag-drop/scroll-behaviour";
+
+mobileDragDropPolyfill({
+	dragImageTranslateOverride:
+		mobileDragDropScrollBehaviourDragImageTranslateOverride,
+	tryFindDraggableTarget: event => {
+		const getDraggableElement = (element: HTMLElement) => {
+			if (element.classList.contains("draggable-item")) return element;
+			if (element.parentElement)
+				return getDraggableElement(element.parentElement);
+			return undefined;
+		};
+
+		return getDraggableElement(event.target as HTMLElement);
+	}
+});
+
+window.addEventListener("touchmove", () => {});
+</script>
+
 <template>
 	<template v-for="(item, itemIndex) in data" :key="item[itemKey]">
 		<component
@@ -219,6 +242,8 @@ const hasSlotContent = (slot: SlotType | undefined, slotProps = {}) => {
 </template>
 
 <style scoped>
+@import "mobile-drag-drop/default.css";
+
 .draggable-item[draggable="true"] {
 	cursor: move;
 }

frontend/src/components/modals/ImportAlbum.vue

@@ -1107,6 +1107,7 @@ onBeforeUnmount(() => {
 			flex: 1;
 			min-height: 100px;
 			display: flex;
+			flex-direction: column;
 		}
 	}
 }

frontend/src/main.ts

@@ -4,8 +4,6 @@ import { createApp } from "vue";
 import VueTippy, { Tippy } from "vue-tippy";
 import { createRouter, createWebHistory } from "vue-router";
 import { createPinia } from "pinia";
-import { polyfill as mobileDragDropPolyfill } from "mobile-drag-drop";
-import { scrollBehaviourDragImageTranslateOverride as mobileDragDropScrollBehaviourDragImageTranslateOverride } from "mobile-drag-drop/scroll-behaviour";
 import "lofig";
 
 import { useUserAuthStore } from "@/stores/userAuth";
@@ -300,24 +298,6 @@ lofig.folder = defaultConfigURL;
 	const websocketsDomain = await lofig.get("backend.websocketsDomain");
 	ws.init(websocketsDomain);
 
-	mobileDragDropPolyfill({
-		dragImageTranslateOverride:
-			mobileDragDropScrollBehaviourDragImageTranslateOverride,
-		tryFindDraggableTarget: event => {
-			const getDraggableElement = (element: HTMLElement) => {
-				if (element.classList.contains("draggable-item"))
-					return element;
-				if (element.parentElement)
-					return getDraggableElement(element.parentElement);
-				return undefined;
-			};
-
-			return getDraggableElement(event.target as HTMLElement);
-		}
-	});
-
-	window.addEventListener("touchmove", () => {});
-
 	if (await lofig.get("siteSettings.mediasession")) ms.init();
 
 	ws.socket.on("ready", res => {