improved broken image handling and cleaned up modal formatting

src/components/Modal.vue

@@ -1,12 +1,14 @@
 <template>
-  <div v-show="visible" id="movie-modal" class="movie-modal movie-card p-5">
-    <span
-      class="hover-pointer font-bold w-full block text-right sm:pr-5 pb-3 pt-5"
-      @click="toggleModal()"
-    >
-      X
-    </span>
-    <slot class=""></slot>
+  <div v-show="visible" id="movie-modal" class="movie-modal movie-card">
+    <div class="max-w-4xl mx-auto flex flex-col px-2 sm:px-0">
+      <span
+        class="hover-pointer font-bold self-end pr-1 sm:pr-5 pt-5 pb-5 sm:pb-0"
+        @click="toggleModal()"
+      >
+        <span class="bg-red-600 p-2 rounded">X</span>
+      </span>
+      <slot></slot>
+    </div>
   </div>
 </template>
 

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>

src/components/admin/search.vue

@@ -8,12 +8,7 @@
   </form>
   <ul class="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 gap-4">
     <li v-for="movie in movies" class="p-1 movie-card">
-      <img
-        :src="movie.poster"
-        alt="movie poster"
-        class="neon-border hover-pointer"
-        @click="showModal(movie)"
-      />
+      <MoviePoster :image="movie.poster" @click="showModal(movie)" />
       <div class="p-2">
         <h5 class="text-center">{{ movie.title }} ({{ movie.year }})</h5>
       </div>

src/components/modal-content/AddMovie.vue

@@ -1,22 +1,18 @@
 <template>
   <div v-if="props.movie != null" class="sm:m-5 p-10 movie-card neon-border">
     <div>
-      <h2 id="modal-title" class="row pb-3">
+      <h2 id="modal-title" class="row pb-10">
         {{ movie.title }} ({{ movie.year }})
       </h2>
 
-      <div class="grid sm:grid-cols-2">
+      <div class="grid sm:grid-cols-2 gap-5">
         <!-- MODAL POSTER -->
-        <div class="text-end">
-          <img
-            id="modal-poster"
-            :src="movie.poster"
-            alt="poster"
-            class="pt-5"
-          />
-        </div>
+        <MoviePoster
+          :image="movie.poster"
+          class="max-h-80 max-w-72 sm:max-h-none sm:max-w-none mx-auto sm:mx-none"
+        />
 
-        <div class="pt-5">
+        <div class="mx-auto sm:mx-none">
           <label class="" for="list-picker">Add To List</label><br />
           <select id="list-picker" v-model="list_id" class="p-1 text-black">
             <option v-for="list in lists" :value="list.id">

src/components/modal-content/ShowMovie.vue

@@ -2,14 +2,13 @@
   <div class="sm:m-5 p-10 movie-card neon-border">
     <div>
       <LoadingIcon v-if="updating" />
-      <h2 class="text-xl pb-3 text-center sm:text-left">
+      <h2 class="text-xl pb-10 text-center sm:text-left">
         {{ movie.title }} ({{ movie.year }})
       </h2>
       <div class="sm:inline-flex sm:space-x-5">
-        <img
-          :src="movie.poster"
-          alt="movie poster"
-          class="mx-auto sm:mx-0 neon-border"
+        <MoviePoster
+          :image="movie.poster"
+          class="max-h-80 max-w-72 mx-auto sm:mx-none"
         />
         <div class="pt-5 sm:pt-0">
           <p>{{ movie.plot }}</p>