improved broken image handling and cleaned up modal formatting

src/components/MoviePoster.vue

@@ -0,0 +1,36 @@
+<script lang="ts" setup>
+import placeholderPoster from "assets/img/poster-placeholder.svg";
+
+const imgRef = ref<HTMLImageElement | null>(null);
+const props = defineProps(["image"]);
+
+const handleImageError = function (event: Event) {
+  (event.target as HTMLImageElement).classList.remove("lazyload");
+  (event.target as HTMLImageElement).classList.add("object-cover");
+  (event.target as HTMLImageElement).src = placeholderPoster;
+};
+
+watch(
+  () => props.image,
+  (newImage) => {
+    if (imgRef.value && newImage) {
+      imgRef.value.classList.add("lazyload");
+      imgRef.value.setAttribute("data-src", newImage);
+    }
+  },
+);
+</script>
+
+<template>
+  <div class="aspect-[2/3] w-full text-blue-300">
+    <img
+      ref="imgRef"
+      :data-src="props.image"
+      alt="Movie Details"
+      class="lazyload hover-pointer w-full h-full"
+      @error="handleImageError"
+    />
+  </div>
+</template>
+
+<style scoped></style>