Popup fixes

client/src/App.vue

@@ -17,7 +17,7 @@ function toggleDark() { dark.value = !dark.value }
   position: fixed;
   top: 16px;
   right: 16px;
-  z-index: 500;
+  z-index: 50;
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: 99px;

client/src/components/Aircraft.vue

@@ -247,7 +247,7 @@ const navball = computed(() => {
 <style scoped>
 .aircraft-popup {
 	position: fixed;
-	z-index: 9999;
+	z-index: 100;
 	pointer-events: auto;
 	background: rgba(0,0,0,0.88);
 	border: 1px solid rgba(200,200,220,0.3);

client/src/components/Ship.vue

@@ -255,7 +255,7 @@ const compass = computed(() => {
 <style scoped>
 .ship-popup {
 	position: fixed;
-	z-index: 9999;
+	z-index: 100;
 	pointer-events: auto;
 	background: rgba(0,0,0,0.88);
 	border: 1px solid rgba(200,200,220,0.3);
@@ -342,7 +342,7 @@ const compass = computed(() => {
 }
 .sp-gauge:hover   { border-color: #0f0; }
 .sp-gauge-val     { font-size: 20px; font-weight: bold; color: #0ff; }
-.sp-gauge-unit    { font-size: 11px; color: #0ff; margin-bottom: 2px; }
+.sp-gauge-unit    { font-size: 11px; color: #0ff; margin-bottom: 5px; }
 
 .sp-compass { flex: 1; }
 </style>

client/src/services/adsb.ts

@@ -10,11 +10,10 @@ import { Vector as VectorLayer } from 'ol/layer'
 import { Vector as VectorSource } from 'ol/source'
 import { adjustedInterval } from '@ztimson/utils'
 import AircraftPopup from '@/components/Aircraft.vue'
+import { bringToFront } from './zindex'
 
 const API = BASE + '/api'
 
-let highestZIndex = 1000
-
 function getAltColor(alt: number): [number, number, number] {
 	const a = Math.max(0, alt)
 	if (a < 10)    return [0, 0, 0]
@@ -51,8 +50,6 @@ export class AirTrafficLayer {
 
 	constructor(map: Map) { this.map = map }
 
-	// ── Public ──────────────────────────────────────────────────────────────────
-
 	async show() {
 		if (this.visible) return
 		this.visible = true
@@ -84,8 +81,6 @@ export class AirTrafficLayer {
 		this.traceSegs   = {}
 	}
 
-	// ── Private ──────────────────────────────────────────────────────────────────
-
 	private async _fetch() {
 		const j = await fetch(`${API}/adsb`).then(r => r.json())
 		this.data = (j || []).map((a: any) => ({
@@ -184,10 +179,7 @@ export class AirTrafficLayer {
 			plane:          planeRef.value,
 			position:       mobile ? {x: window.innerWidth / 2 - 180, y: window.innerHeight - 380 - 16} : {x: window.innerWidth - 360 - 16, y: 16},
 			onClose:        () => this._closePopup(icao),
-			onBringToFront: () => {
+			onBringToFront: () => bringToFront(container),
-				highestZIndex++
-				container.style.zIndex = String(highestZIndex)
-			},
 		})
 
 		app.mount(container)
@@ -215,7 +207,6 @@ export class AirTrafficLayer {
 			const plane = this.data.find(p => p.icao === icao)
 			if (!plane) { this._closePopup(icao); continue }
 			this.popups[icao].planeRef.value = plane
-			// Don't reposition — user may have dragged it 🎯
 			this._fetchTrace(plane)
 		}
 	}

client/src/services/ais.ts

@@ -9,11 +9,10 @@ import { Vector as VectorLayer } from 'ol/layer'
 import { Vector as VectorSource } from 'ol/source'
 import { adjustedInterval } from '@ztimson/utils'
 import ShipPopup from '@/components/Ship.vue'
+import { bringToFront } from './zindex'
 
 const API = BASE + '/api'
 
-let highestZIndex = 1000
-
 const SHIP_COLORS: Record<string, string> = {
 	'Base Station':   '#00aaff',
 	'Class A':        '#00ff00',
@@ -136,10 +135,7 @@ export class AISLayer {
 			boat:           boatRef.value,
 			position:       mobile ? {x: window.innerWidth / 2 - 180, y: window.innerHeight - 380 - 16} : {x: window.innerWidth - 360 - 16, y: 16},
 			onClose:        () => this._closePopup(mmsi),
-			onBringToFront: () => {
+			onBringToFront: () => bringToFront(container),
-				highestZIndex++
-				container.style.zIndex = String(highestZIndex)
-			},
 		})
 
 		app.mount(container)

client/src/services/zindex.ts

@@ -0,0 +1,5 @@
+// src/services/zIndex.ts
+export let highestZIndex = 1000
+export function bringToFront(el: HTMLElement) {
+	el.style.zIndex = String(++highestZIndex)
+}