machine map preview: escape table clipping, flip when short on room

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;
+  /* Placement is computed in show(); these are only the fallback for the tick
-  z-index: 40;
+     before it runs. */
-  left: 0;
+  position: fixed;
-  top: calc(100% + 0.35rem);
+  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;