From 54c3252c45f16c62abe9386c3686b6fc21d93d58 Mon Sep 17 00:00:00 2001
From: nathan <nathangray.bsc+github@gmail.com>
Date: Thu, 11 Jul 2024 11:27:31 -0600
Subject: [PATCH] Change shoelace contextmenu style & position - Reduced line
 height - Align labels with/without icon - Position to side when there's
 insufficient space above / below

---
 api/js/egw_action/EgwMenuShoelace.ts | 38 ++++++++++++++++++----------
 1 file changed, 25 insertions(+), 13 deletions(-)

diff --git a/api/js/egw_action/EgwMenuShoelace.ts b/api/js/egw_action/EgwMenuShoelace.ts
index 1861d278cf..48fedab560 100644
--- a/api/js/egw_action/EgwMenuShoelace.ts
+++ b/api/js/egw_action/EgwMenuShoelace.ts
@@ -14,17 +14,25 @@ export class EgwMenuShoelace extends LitElement
 			css`
 				:host {
 					display: block;
-
-					/* Fit in popup, scroll if not enough height */
-					max-height: var(--auto-size-available-height, auto);
-					overflow-y: auto;
 				}
 
 				.default-item::part(label) {
 					font-weight: var(--sl-font-weight-bold, bold);
 				}
 
+				sl-menu-item::part(base) {
+					height: 1.6em;
+					line-height: var(--sl-line-height-dense);
+					align-items: center;
+					padding: 0;
+				}
+
+				sl-menu-item::part(prefix) {
+					min-width: var(--sl-spacing-2x-large);
+				}
+
 				et2-image {
+					line-height: normal;
 					width: 1.5em;
 				}
 			`
@@ -75,23 +83,26 @@ export class EgwMenuShoelace extends LitElement
 		this.removeCallback = _onHide;
 		if(this.popup == null)
 		{
-			this.popup = document.createElement("sl-popup");
-			this.popup.placement = "bottom";
-			this.popup.autoSize = "vertical";
-			this.popup.flip = true;
-			this.popup.shift = true;
-			this.popup.classList.add("egw_menu")
-			document.body.append(this.popup);
+			this.popup = Object.assign(document.createElement("sl-popup"), {
+				placement: "top",
+				autoSize: "vertical",
+				flip: true,
+				flipFallbackPlacements: "right bottom",
+				flipFallbackStrategy: "initial",
+				shift: true
+			});
 			this.popup.append(this);
+			this.popup.classList.add("egw_menu");
 		}
+		let menu = this;
 		this.popup.anchor = {
 			getBoundingClientRect()
 			{
 				return {
 					x: _x,
 					y: _y,
-					width: 0,
-					height: 0,
+					width: menu.clientWidth,
+					height: menu.clientHeight,
 					top: _y,
 					left: _x,
 					right: _x,
@@ -100,6 +111,7 @@ export class EgwMenuShoelace extends LitElement
 			}
 		};
 		this.popup.active = true;
+		document.body.append(this.popup);
 		Promise.all([this.updateComplete, this.popup.updateComplete]).then(() =>
 		{
 			// Causes scroll issues if we don't position