From 4b1a64d29891bc99c738e616fea6772475a7a1e6 Mon Sep 17 00:00:00 2001
From: cproudlock <cproudlock@localhost>
Date: Mon, 10 Aug 2026 09:59:30 -0400
Subject: [PATCH] warranty: stop the machine map preview being clipped on the
 last row

The bottom row's preview was cut off behind the pagination controls.

.table-container sets overflow-x: auto, and ANY non-visible overflow makes an
element a clipping context, so the absolutely-positioned preview was cropped at
the container's edge. The last row had nowhere to open into.

The preview is now positioned fixed from the chip's bounding rect, which
escapes the clip entirely, and flips ABOVE the chip when there is not room
below. It also clamps horizontally, since the column sits well to the right on
a wide table and the panel is nearly 300px.

Height is measured from the rendered element rather than assumed: it depends on
the blueprint's aspect ratio, which differs per site. That means one tick where
the element exists but is unplaced, so it starts hidden and is revealed once
positioned - otherwise it flashed in the corner of the screen.

Also sets white-space: normal. The table sets nowrap for its cells, which the
preview inherited and which ran the location line off the panel.
---
 .../frontend/components/MachineMapChip.vue    | 57 ++++++++++++++++---
 1 file changed, 49 insertions(+), 8 deletions(-)

diff --git a/plugins/warranty/frontend/components/MachineMapChip.vue b/plugins/warranty/frontend/components/MachineMapChip.vue
index 87d5ca1..8bfbe9f 100644
--- a/plugins/warranty/frontend/components/MachineMapChip.vue
+++ b/plugins/warranty/frontend/components/MachineMapChip.vue
@@ -2,7 +2,8 @@
   <span
     v-if="machine"
     class="mmc"
-    @mouseenter="open = true"
+    ref="hostEl"
+    @mouseenter="show"
     @mouseleave="open = false"
   >
     <!-- Deliberately not a link. /machines/:id is keyed by machineid, not
@@ -13,7 +14,7 @@
 
     <!-- Hover preview: where to walk to. Rendered only while hovered so a
          table of 200 rows does not build 200 blueprints. -->
-    <span v-if="open && hasPosition" class="mmc-pop">
+    <span v-if="open && hasPosition" ref="popEl" class="mmc-pop" :style="popStyle">
       <span class="mmc-pop-title">{{ machine.name || machine.machinenumber }}</span>
       <span v-if="machine.locationname" class="mmc-pop-loc">{{ machine.locationname }}</span>
       <span class="mmc-map">
@@ -24,7 +25,7 @@
 
     <!-- A machine with a number but no map position still deserves the chip;
          say why there is no picture rather than showing an empty box. -->
-    <span v-else-if="open" class="mmc-pop mmc-pop-plain">
+    <span v-else-if="open" ref="popEl" class="mmc-pop mmc-pop-plain" :style="popStyle">
       <span class="mmc-pop-title">{{ machine.name || machine.machinenumber }}</span>
       <span class="mmc-pop-loc">{{ machine.locationname || 'Not placed on the floor map' }}</span>
     </span>
@@ -33,7 +34,7 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted } from 'vue'
+import { ref, computed, onMounted, nextTick } from 'vue'
 import { state as mapState, loadMapConfig, blueprintUrlFor } from '@/composables/mapConfig'
 
 const props = defineProps({
@@ -41,9 +42,46 @@ const props = defineProps({
 })
 
 const open = ref(false)
+const hostEl = ref(null)
+const popEl = ref(null)
+// Starts hidden: the first tick renders before show() can measure, and an
+// unpositioned fixed element would flash in the corner of the screen.
+const popStyle = ref({ visibility: 'hidden' })
 
 onMounted(() => { loadMapConfig() })
 
+// position: fixed, placed from the chip's rect. The table sits in a
+// .table-container with overflow-x: auto, and ANY non-visible overflow clips
+// absolutely-positioned children - which cut the last row's preview off behind
+// the pagination. Fixed escapes that clip entirely.
+async function show() {
+  popStyle.value = { visibility: 'hidden' }
+  open.value = true
+  await nextTick()
+  const host = hostEl.value
+  if (!host) return
+  const rect = host.getBoundingClientRect()
+  const gap = 6
+  // Measure the real popover rather than guessing: its height depends on the
+  // blueprint's aspect ratio, which differs per site.
+  const popHeight = popEl.value ? popEl.value.offsetHeight : 260
+  const popWidth = popEl.value ? popEl.value.offsetWidth : 288
+
+  // Flip above when there is not room below, so the bottom row stays readable.
+  const roomBelow = window.innerHeight - rect.bottom
+  const top = (roomBelow < popHeight + gap && rect.top > popHeight + gap)
+    ? rect.top - popHeight - gap
+    : rect.bottom + gap
+
+  // Keep it on screen horizontally too - the column sits well right on a wide
+  // table and the preview is nearly 300px.
+  const left = Math.max(8, Math.min(rect.left, window.innerWidth - popWidth - 8))
+
+  popStyle.value = {
+    position: 'fixed', top: `${top}px`, left: `${left}px`, visibility: 'visible'
+  }
+}
+
 const hasPosition = computed(() =>
   props.machine && props.machine.mapx != null && props.machine.mapy != null)
 
@@ -86,11 +124,14 @@ const markerStyle = computed(() => {
 .mmc:hover .mmc-chip { border-color: var(--primary); }
 
 .mmc-pop {
-  position: absolute;
-  z-index: 40;
-  left: 0;
-  top: calc(100% + 0.35rem);
+  /* Placement is computed in show(); these are only the fallback for the tick
+     before it runs. */
+  position: fixed;
+  z-index: 1000;
   display: flex;
+  /* .table-container sets white-space: nowrap for the table; the preview text
+     must not inherit it or the location line runs off the panel. */
+  white-space: normal;
   flex-direction: column;
   gap: 0.25rem;
   padding: 0.5rem;