From 146336d1ce9a9ec93e9819ae602722bb99742784 Mon Sep 17 00:00:00 2001
From: ztimson <zaktimson@gmail.com>
Date: Sun, 21 Jun 2026 23:14:11 -0400
Subject: [PATCH] mobile friendly

---
 client/src/views/Dashboard.vue | 132 ++++++++++++++++++++++-----------
 1 file changed, 87 insertions(+), 45 deletions(-)

diff --git a/client/src/views/Dashboard.vue b/client/src/views/Dashboard.vue
index 25efec9..c029116 100644
--- a/client/src/views/Dashboard.vue
+++ b/client/src/views/Dashboard.vue
@@ -33,73 +33,115 @@ const groupedMetrics = computed(() => {
 
 <style scoped lang="scss">
 .dashboard {
-  display: flex;
-  height: 100vh;
-  overflow: hidden;
-  background: var(--bg);
-  color: var(--text);
+	display: flex;
+	height: 100vh;
+	overflow: hidden;
+	background: var(--bg);
+	color: var(--text);
 }
 
 .map-col {
-  flex: 1;
-  min-width: 0;
-  padding: 16px;
-  display: flex;
-  flex-direction: column;
+	flex: 1;
+	min-width: 0;
+	padding: 16px;
+	display: flex;
+	flex-direction: column;
 }
 
 .panel-col {
-  width: 380px;
-  flex-shrink: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  padding: 16px;
-  overflow-y: auto;
-  border-left: 1px solid var(--border);
+	width: 380px;
+	flex-shrink: 0;
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+	padding: 16px;
+	overflow-y: auto;
+	border-left: 1px solid var(--border);
 
-  &::-webkit-scrollbar { width: 4px; }
-  &::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
+	&::-webkit-scrollbar { width: 4px; }
+	&::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
 }
 
 .group-label {
-  font-size: 10px;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.1em;
-  color: var(--text-muted);
-  margin-top: 4px;
-  margin-bottom: 2px;
-  padding: 0 2px;
+	font-size: 10px;
+	font-weight: 700;
+	text-transform: uppercase;
+	letter-spacing: 0.1em;
+	color: var(--text-muted);
+	margin-top: 4px;
+	margin-bottom: 2px;
+	padding: 0 2px;
 }
 
 .metric-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 8px;
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	gap: 8px;
 }
 
 .loading-bar {
-  height: 2px;
-  background: var(--accent);
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 9999;
-  animation: pulse 1s infinite;
+	height: 2px;
+	background: var(--accent);
+	position: fixed;
+	top: 0; left: 0; right: 0;
+	z-index: 9999;
+	animation: pulse 1s infinite;
 }
 
 @keyframes pulse {
-  0%, 100% { opacity: 1; }
-  50%       { opacity: 0.4; }
+	0%, 100% { opacity: 1; }
+	50%       { opacity: 0.4; }
 }
 
 @media (max-width: 768px) {
-  .dashboard  { flex-direction: column; }
-  .map-col    { height: 45vh; padding: 8px; }
-  .panel-col  { width: 100%; border-left: none; border-top: 1px solid var(--border); }
-  .metric-grid { grid-template-columns: 1fr 1fr; }
+	.dashboard {
+		flex-direction: column;
+		position: relative;
+		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>