From d26355cebbc813ea35975b6e599d4a532af3708d Mon Sep 17 00:00:00 2001
From: Cam Proudlock <cam.proudlock@gmail.com>
Date: Fri, 21 Aug 2026 09:51:12 -0400
Subject: [PATCH] Hover mini-map marker, knowledge base search, and the label
 generator

---
 .../src/components/LocationMapTooltip.vue     | 36 ++++++++++++++++---
 1 file changed, 31 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/LocationMapTooltip.vue b/frontend/src/components/LocationMapTooltip.vue
index d58fff81..37e95d8a 100644
--- a/frontend/src/components/LocationMapTooltip.vue
+++ b/frontend/src/components/LocationMapTooltip.vue
@@ -111,6 +111,18 @@ const markerStyle = computed(() => ({
   transform: `translate(-50%, -50%) scale(${1 / zoom.value})`
 }))
 
+// The frame the marker's percentages are measured against MUST be the frame the
+// drawing is painted in. The image used object-fit: contain inside a fixed
+// 390x300 box, so a level whose drawing is not that aspect ratio was letterboxed
+// or pillarboxed - and the marker, positioned at a percentage of the BOX, then
+// sat in a different coordinate space from the drawing inside it. A tall
+// drawing pillarboxes, every marker's x shifts, and one near the left edge
+// lands in the grey gutter beside the map. Levels near 390:300 looked correct,
+// which is why it only affected some assets.
+//
+// The fix is to let the IMAGE size the frame: the frame shrink-wraps the drawing,
+// so a percentage of the frame IS a percentage of the drawing, whatever the
+// level's aspect ratio. The letterboxing moves out to the preview around it.
 // Transform style that centers on the marker and zooms toward it
 const transformStyle = computed(() => {
   // Calculate translation to center the marker in the preview
@@ -253,6 +265,12 @@ watch(currentTheme, () => {
 
 .map-preview {
   position: relative;
+  /* Centres the aspect-fitted frame, which is where the letterboxing now
+     happens. The frame carries the drawing AND the marker, so the two can no
+     longer disagree. */
+  display: flex;
+  align-items: center;
+  justify-content: center;
   /* Smaller than it was: this is a glance-and-move-on preview, and at 500px it
      covered the row it was launched from. Aspect ratio kept. */
   width: 390px;
@@ -263,15 +281,23 @@ watch(currentTheme, () => {
 
 .map-transform {
   position: relative;
-  width: 100%;
-  height: 100%;
+  /* Shrink-wraps the image rather than filling the preview, so the box the
+     marker is positioned in is the box the drawing is painted in. */
+  max-width: 100%;
+  max-height: 100%;
   transition: transform 0.15s ease-out;
 }
 
 .map-image {
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
+  /* Sizes itself from the drawing, scaled down to fit the preview. NOT
+     width/height 100% with object-fit: contain - that painted the drawing
+     letterboxed inside a box the marker was measured against, which put the two
+     in different coordinate spaces on any level that is not 390:300. */
+  display: block;
+  max-width: 100%;
+  max-height: 100%;
+  width: auto;
+  height: auto;
 }
 
 .marker-dot {