Hover mini-map marker, knowledge base search, and the label generator

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 {