Dashboard corrections

frontend/src/components/DashboardCards.vue

@@ -19,7 +19,17 @@
       <ul v-else class="dc-rows">
         <li v-for="(row, index) in visibleRows(card)" :key="index" class="dc-row"
             :class="{ 'dc-row-stacked': card.layout === 'stacked' }">
-          <router-link v-if="row.link" :to="row.link" class="dc-row-title"
+          <!-- With coordinates, the name carries the same floor-plan preview
+               the asset's own page uses. Without them, a plain link. -->
+          <LocationMapTooltip v-if="row.link && row.maphover"
+                              :left="row.maphover.x" :top="row.maphover.y"
+                              :machineName="row.maphover.label">
+            <router-link :to="row.link" class="dc-row-title"
+                         :title="row.titletip || undefined">
+              {{ row.title }}
+            </router-link>
+          </LocationMapTooltip>
+          <router-link v-else-if="row.link" :to="row.link" class="dc-row-title"
                        :title="row.titletip || undefined">
             {{ row.title }}
           </router-link>
@@ -64,6 +74,7 @@
 import { ref, computed, onMounted } from 'vue'
 import api from '../api'
 import { useAuthStore } from '@/stores/auth'
+import LocationMapTooltip from '@/components/LocationMapTooltip.vue'
 import {
   toApiPath, visibleRows, overflowCount, metricValue, cardVisible, sortCards,
   permittedCards, renderableCards, rows as cardData,
@@ -109,7 +120,12 @@ defineExpose({ load })
 <style scoped>
 .dc-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
+  /* Four across on a wide screen, not five. A card holds a hostname, a machine
+     number and a state on one line; at five columns those lines truncate on
+     the very rows that matter most. auto-fit rather than auto-fill so two
+     cards fill the width instead of leaving three empty tracks. */
+  grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr));
+  max-width: 120rem;
   gap: 1rem;
   margin-bottom: 1.75rem;
   align-items: start;

frontend/src/components/dashboardCards.js

@@ -118,10 +118,23 @@ export function mapTitleTip(card, item) {
   return key ? (item[key] || '') : ''
 }
 
+// Floor-plan preview on hover, for rows that carry coordinates. Returns null
+// when the card declares none or the row has not been placed on the map - an
+// unplaced printer still belongs on the card, it just has nothing to preview.
+export function mapHover(card, item) {
+  const spec = card.map && card.map.maphover
+  if (!spec) return null
+  const x = item[spec.x]
+  const y = item[spec.y]
+  if (x === null || x === undefined || y === null || y === undefined) return null
+  return { x, y, label: spec.label ? (item[spec.label] || '') : '' }
+}
+
 export function cardRows(card) {
   return rows(card).map((item) => ({
     title: mapTitle(card, item),
     titletip: mapTitleTip(card, item),
+    maphover: mapHover(card, item),
     detail: mapDetail(card, item),
     detailtip: mapDetailTip(card, item),
     meta: mapMeta(card, item),