From 6b12ca0b11e81c53e5a5a4fa0efdb3332fc35205 Mon Sep 17 00:00:00 2001
From: James Lyne <jim+github@not-null.co.uk>
Date: Sat, 29 May 2021 00:52:08 +0100
Subject: [PATCH] Improve mobile context menu

---
 src/components/map/MapContextMenu.vue | 28 ++++++++++++++++++++++-----
 1 file changed, 23 insertions(+), 5 deletions(-)

diff --git a/src/components/map/MapContextMenu.vue b/src/components/map/MapContextMenu.vue
index 2cf2f04..c9cf428 100644
--- a/src/components/map/MapContextMenu.vue
+++ b/src/components/map/MapContextMenu.vue
@@ -226,18 +226,23 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 	#map-context-menu {
-		background-color: var(--background-base);
-		box-shadow: var(--box-shadow);
-		color: var(--text-base);
-		border-radius: var(--border-radius);
 		position: fixed;
 		z-index: 150;
-		padding: 0.5rem;
 		min-width: 15rem;
 		max-width: 22.5rem;
 		top: 0;
 		left: 0;
 
+		ul {
+			background-color: var(--background-base);
+			box-shadow: var(--box-shadow);
+			color: var(--text-base);
+			border-radius: var(--border-radius);
+			padding: 0.5rem;
+			position: relative;
+			z-index: 1;
+		}
+
 		::v-deep(.world) {
 			padding: 0.2rem 0 0.2rem 0.8rem;
 			margin-bottom: 0;
@@ -258,6 +263,19 @@ export default defineComponent({
 			max-width: 40rem;
 			overflow: auto;
 			transform: none !important;
+
+			&:before {
+				content: '';
+				position: fixed;
+				top: auto;
+				right: 0;
+				bottom: 0;
+				left: 0;
+				display: block;
+				height: 40rem;
+				background-image: linear-gradient(0deg, var(--background-dark), transparent);
+				z-index: -1;
+			}
 		}
 	}
 </style>
\ No newline at end of file