Improve mobile interactions: touch events, tooltip sizing, filter positioning

Author: atharvas

src/components/layercake/ScrollVoronoi.svelte

@@ -28,9 +28,8 @@
 	let pointsData = [];
 	let selectedPoint;
 	$: voronoiEnabled =
-		!isMobile &&
-		((typeof chartScrollIndex === "number" && chartScrollIndex >= 14) ||
-			chartScrollIndex == "exit");
+		(typeof chartScrollIndex === "number" && chartScrollIndex >= 14) ||
+		chartScrollIndex == "exit";
 
 	const isSelectablePoint = (
 		point,
@@ -233,18 +232,19 @@
 				if (!$lockedSelection && !isMobile) mouseleaveCircle(point);
 			}}
 			on:focus={() => {
-				if (!$lockedSelection && !isMobile) mouseoverCircle(point);
+				if (!$lockedSelection) mouseoverCircle(point);
 			}}
 			on:click={() => {
-				if (!isMobile) {
-					lockedSelection.set(true);
-					mouseClickCircle(point);
-				}
+				lockedSelection.set(true);
+				mouseClickCircle(point);
+			}}
+			on:touchend|preventDefault={() => {
+				lockedSelection.set(true);
+				mouseClickCircle(point);
 			}}
 			on:keydown={(e) => {
 				if (
 					!$lockedSelection &&
-					!isMobile &&
 					(e.key === "Enter" || e.key === " ")
 				) {
 					lockedSelection.set(true);

src/components/ui/Filters.svelte

@@ -336,7 +336,7 @@
 		align-items: flex-start;
 		margin: 0 auto;
 		position: absolute;
-		top: 0;
+		top: var(--navbar-height, 3.5rem);
 		z-index: 1000;
 		padding: 1rem;
 	}

src/components/ui/Tooltip.svelte

@@ -238,11 +238,12 @@
 
 <style>
 	#universal-tooltip {
+		--tooltip-height: clamp(200px, 35vh, 400px);
 		position: fixed;
 		left: 0;
-		bottom: -300px;
+		bottom: calc(-1 * var(--tooltip-height));
 		width: 100%;
-		height: 300px;
+		height: var(--tooltip-height);
 		padding: 1rem;
 		background: var(--bg-tertiary);
 		border-top: 1px solid var(--border-secondary);
@@ -452,8 +453,7 @@
 	/* Mobile Responsive */
 	@media (max-width: 700px) {
 		#universal-tooltip {
-			bottom: -400px;
-			height: 400px;
+			--tooltip-height: clamp(250px, 45vh, 400px);
 			padding: 0.75rem;
 		}