mobile friendly

client/src/views/Dashboard.vue

@@ -83,9 +83,7 @@ const groupedMetrics = computed(() => {
 	height: 2px;
 	background: var(--accent);
 	position: fixed;
-  top: 0;
+	top: 0; left: 0; right: 0;
-  left: 0;
-  right: 0;
 	z-index: 9999;
 	animation: pulse 1s infinite;
 }
@@ -96,10 +94,54 @@ const groupedMetrics = computed(() => {
 }
 
 @media (max-width: 768px) {
-  .dashboard  { flex-direction: column; }
+	.dashboard {
-  .map-col    { height: 45vh; padding: 8px; }
+		flex-direction: column;
-  .panel-col  { width: 100%; border-left: none; border-top: 1px solid var(--border); }
+		position: relative;
-  .metric-grid { grid-template-columns: 1fr 1fr; }
+		overflow: hidden;
+	}
+
+	.map-col {
+		position: absolute;
+		inset: 0;
+		height: 100vh;
+		padding: 8px;
+		z-index: 0;
+	}
+
+	.panel-col {
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		z-index: 10;
+		width: 100%;
+		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 */
+		-webkit-overflow-scrolling: touch;
+
+		&::before {
+			content: '';
+			display: block;
+			width: 36px;
+			height: 4px;
+			background: var(--border);
+			border-radius: 2px;
+			margin: 0 auto 12px;
+		}
+
+		&::-webkit-scrollbar { display: none; }
+	}
 }
 </style>