ADSB

client/src/views/Dashboard.vue

@@ -14,20 +14,19 @@ const selectedMetric = ref<string | null>(null)
 let   interval: ReturnType<typeof setInterval>
 
 onMounted(async () => {
-  await fetchAll()
-  interval = setInterval(fetchAll, 60 * 1000)
+	await fetchAll()
+	interval = setInterval(fetchAll, 60 * 1000)
 })
 
 onUnmounted(() => clearInterval(interval))
 
-// Group all available metric keys present in current data
 const groupedMetrics = computed(() => {
-  return GROUPS.map(group => ({
-    group,
-    keys: Object.entries(METRICS)
-      .filter(([key, meta]) => meta.group === group && current.value[key] != null)
-      .map(([key]) => key)
-  })).filter(g => g.keys.length > 0)
+	return GROUPS.map(group => ({
+		group,
+		keys: Object.entries(METRICS)
+			.filter(([key, meta]) => meta.group === group && current.value[key] != null)
+			.map(([key]) => key)
+	})).filter(g => g.keys.length > 0)
 })
 </script>
 
@@ -96,50 +95,27 @@ const groupedMetrics = computed(() => {
 @media (max-width: 768px) {
 	.dashboard {
 		flex-direction: column;
-		position: relative;
-		overflow: hidden;
+		overflow-y: auto;
+		height: 100dvh;
 	}
 
 	.map-col {
-		position: absolute;
-		inset: 0;
-		height: 100vh;
+		width: 100%;
+		height: 100vw;
+		min-height: 100vw;
 		padding: 8px;
-		z-index: 0;
+		flex-shrink: 0;
 	}
 
 	.panel-col {
-		position: absolute;
-		bottom: 0;
-		left: 0;
-		right: 0;
-		z-index: 10;
 		width: 100%;
+		flex-shrink: 0;
 		border-left: none;
 		border-top: 1px solid var(--border);
-		border-radius: 16px 16px 0 0;
-
-		/* Show a peek of the panel, scrolls up over the map */
-		max-height: calc(100vh - 120px);
-		min-height: 40vh;
-		overflow-y: auto;
-
-		background: var(--bg);
-		padding: 12px 16px 24px;
-
-		/* Smooth momentum scroll on iOS */
+		overflow-y: visible;
 		-webkit-overflow-scrolling: touch;
 
-		&::before {
-			content: '';
-			display: block;
-			width: 36px;
-			height: 4px;
-			background: var(--border);
-			border-radius: 2px;
-			margin: 0 auto 12px;
-		}
-
+		&::before { display: none; }
 		&::-webkit-scrollbar { display: none; }
 	}
 }