From cea1bb86061bbf6940cf2cd3c40503f83715dce1 Mon Sep 17 00:00:00 2001
From: James Barnsley <james@barnsley.nz>
Date: Fri, 5 Jan 2024 15:30:13 +1300
Subject: [PATCH] Sticky context menu to bottom, using flex

---
 src/scss/components/_context-menu.scss | 43 ++++++++++++--------------
 src/scss/components/_filter-field.scss |  4 +--
 2 files changed, 21 insertions(+), 26 deletions(-)

diff --git a/src/scss/components/_context-menu.scss b/src/scss/components/_context-menu.scss
index ac937d757..edfb42c05 100755
--- a/src/scss/components/_context-menu.scss
+++ b/src/scss/components/_context-menu.scss
@@ -194,6 +194,10 @@
 		left: 0 !important;
 		margin: 0 !important;
 		text-align: center;
+		overflow-y: auto;
+		display: flex;
+		flex-flow: column;
+		flex-direction: column-reverse;
 
 		&--closing {
 			@include fadeout(0.2s, '100px');
@@ -206,24 +210,11 @@
 			bottom: 0;
 			left: 0;
 			z-index: 1;
+			// background-image: linear-gradient(rgba(24,24,24,0) 0%, rgba(24,24,24,0.5) 20%);
 
-			&::after {
-				@include fadein(0.1s, '100px');
-				display: block;
-				content: '';
-				position: absolute;
-				top: calc(20% - 20px);
-				left: 5%;
-				right: 5%;
-				bottom: 0;
-				border-top-left-radius: 20px;
-				border-top-right-radius: 20px;
-				background: colour('white');
-	
-				@include theme('dark') {
-					background: colour('grey');
-				}
-			}
+			// @include theme('light') {
+			// 	background-image: linear-gradient(rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 20%);
+			// }
 		}
 
 		&__title {
@@ -268,13 +259,17 @@
 		}
 
 		&__section {
-			position: absolute;
-			top: 20%;
-			left: 0;
-			right: 0;
-			padding: 0 10%;
-			max-height: 80%;
-			overflow: auto;
+			margin: 20% 10% 0 10%;
+			padding-top: 10px;
+			border-top-left-radius: 20px;
+			border-top-right-radius: 20px;
+			background: colour('white');
+			box-shadow: 0 40px 40px rgba(0,0,0,0.75);
+			overflow: visible;
+	
+			@include theme('dark') {
+				background: colour('grey');
+			}
 
 			&--submenu {
 				background: none;
diff --git a/src/scss/components/_filter-field.scss b/src/scss/components/_filter-field.scss
index 22f6e1229..a3f85d576 100755
--- a/src/scss/components/_filter-field.scss
+++ b/src/scss/components/_filter-field.scss
@@ -61,14 +61,14 @@
 			display: block;
 			width: auto;
 			padding: 10px 0;
-			pointer: auto;
+			cursor: auto;
 
 			.icon {
 				display: none;
 			}
 
 			input {
-				padding: 6px 4px;
+				padding: 6px 24px;
 				width: 100%;
 				box-sizing: border-box;
 				font-size: 1.2rem;