Show a full-size slide on hover in the slide manager

The thumbnails are 120x68 and cropped with object-fit: cover, so any text on a
slide is unreadable and the edges are cut off. Picking the right slide to
reorder or delete meant opening images by hand to tell them apart.

Hovering a thumbnail now shows the whole slide, bounded by the viewport rather
than the image so a 3300x2550 upload does not fill the screen, with the filename
underneath.

Fixed position rather than inside the row: the list scrolls and a
relatively-positioned parent would clip it. pointer-events: none so the preview
can never sit between the cursor and the move or delete buttons.

plugins/slides/frontend/views/SlideManager.vue

@@ -36,7 +36,8 @@
         <div v-for="(slide, idx) in slides" :key="slide.slideid" class="slide-row">
           <input type="checkbox" class="pick" :value="slide.filename" v-model="selected" />
           <span class="order-num">{{ idx + 1 }}</span>
-          <img :src="withBase(slide.url)" :alt="slide.filename" class="thumb" />
+          <img :src="withBase(slide.url)" :alt="slide.filename" class="thumb"
+               @mouseenter="previewSlide = slide" @mouseleave="previewSlide = null" />
           <span class="fname" :title="slide.filename">{{ slide.filename }}</span>
           <div class="move">
             <button class="btn btn-sm btn-secondary" :disabled="idx === 0" @click="move(idx, -1)" title="Move up">&uarr;</button>
@@ -45,6 +46,18 @@
         </div>
       </div>
     </div>
+
+    <!--
+      Hover preview. A 120x68 thumbnail is cropped (object-fit: cover) and far
+      too small to read the text on a slide, so picking the right one meant
+      opening images by hand. Fixed position rather than inside the row: a
+      relatively-positioned parent would clip it, and the list scrolls.
+      Pointer-events none so it can never sit between the cursor and a button.
+    -->
+    <div v-if="previewSlide" class="slide-preview">
+      <img :src="withBase(previewSlide.url)" :alt="previewSlide.filename" />
+      <div class="slide-preview-name">{{ previewSlide.filename }}</div>
+    </div>
   </div>
 </template>
 
@@ -53,6 +66,9 @@ import { ref, computed, onMounted } from 'vue'
 import { slidesApi } from '@/api'
 import { withBase } from '@/utils/basePath'
 
+// Slide currently hovered, shown enlarged. Null when the cursor is elsewhere.
+const previewSlide = ref(null)
+
 const surfaces = [
   { key: 'lobby', label: 'Lobby Display' },
   { key: 'shopfloor', label: 'Shopfloor Screensaver' }
@@ -191,6 +207,41 @@ onMounted(load)
   object-fit: cover;
   border-radius: 4px;
   background: #000;
+  cursor: zoom-in;
+}
+
+.slide-preview {
+  position: fixed;
+  top: 50%;
+  right: 2rem;
+  transform: translateY(-50%);
+  z-index: 1000;
+  padding: 0.5rem;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+  pointer-events: none;
+}
+
+.slide-preview img {
+  display: block;
+  /* Bounded by the viewport, not the image: a 3300x2550 slide would otherwise
+     fill the screen. object-fit contain keeps the whole slide visible, since
+     the point is reading it rather than filling the box. */
+  max-width: min(46vw, 900px);
+  max-height: 76vh;
+  object-fit: contain;
+  background: #000;
+  border-radius: 4px;
+}
+
+.slide-preview-name {
+  margin-top: 0.4rem;
+  font-size: 0.85rem;
+  color: var(--text-light);
+  text-align: center;
+  word-break: break-all;
 }
 .fname {
   flex: 1;