From 6a7a60a9bcc53874ddcf0bc3b113fddc7e080527 Mon Sep 17 00:00:00 2001
From: MatMoul <matmoul@gmail.com>
Date: Sat, 16 May 2026 03:41:25 +0200
Subject: [PATCH] fix: align calc menus with trigger width

---
 samples/calc-02/index.css | 26 +++++++++++++++++---------
 samples/calc-02/index.js  | 10 ++++------
 2 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/samples/calc-02/index.css b/samples/calc-02/index.css
index 54017b7..f872a6e 100644
--- a/samples/calc-02/index.css
+++ b/samples/calc-02/index.css
@@ -207,22 +207,30 @@ body {
 .mode-menu {
 	position: fixed;
 	z-index: 20;
-	display: grid;
-	gap: 6px;
-	padding: 10px;
-	border-radius: 8px;
-		background: rgba(6, 10, 16, 0.16);
-	border: 1px solid rgba(255, 255, 255, 0.08);
-	box-shadow: none;
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+	padding: 6px;
+	border-radius: 6px;
+	background: rgba(16, 21, 30, 0.96);
+	border: 1px solid rgba(255, 255, 255, 0.12);
+	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.32);
+	backdrop-filter: blur(2px);
 }
 
 .mode-menu-item {
-	min-width: 120px;
+	width: 100%;
+	min-width: 0;
+	padding: 6px 10px;
+	border-radius: 5px;
 	background: linear-gradient(180deg, var(--btnAltTop), var(--btnAltBottom));
+	text-align: left;
+	font-weight: 700;
 }
 
 .mode-menu-item.is-active {
-	outline: 2px solid rgba(207, 224, 174, 0.7);
+	outline: 1px solid rgba(207, 224, 174, 0.7);
+	outline-offset: 0;
 }
 
 .key-escape {
diff --git a/samples/calc-02/index.js b/samples/calc-02/index.js
index f3df25a..02c28dd 100644
--- a/samples/calc-02/index.js
+++ b/samples/calc-02/index.js
@@ -357,6 +357,7 @@ function toggleModeMenu() {
 	modeMenuEl = document.createElement('div');
 	modeMenuEl.className = 'mode-menu';
 	modeMenuEl.style.top = `${rect.bottom + 6 + window.scrollY}px`;
+	modeMenuEl.style.minWidth = `${rect.width}px`;
 	modeOptions.forEach((mode) => {
 		const button = document.createElement('button');
 		button.type = 'button';
@@ -370,9 +371,7 @@ function toggleModeMenu() {
 		modeMenuEl.appendChild(button);
 	});
 	document.body.appendChild(modeMenuEl);
-	const menuRect = modeMenuEl.getBoundingClientRect();
-	const maxLeft = Math.max(8, window.innerWidth - menuRect.width - 8);
-	modeMenuEl.style.left = `${Math.max(8, Math.min(maxLeft, rect.left + window.scrollX))}px`;
+	modeMenuEl.style.left = `${rect.left + window.scrollX}px`;
 }
 
 modeButton.addEventListener('click', (event) => {
@@ -451,6 +450,7 @@ function toggleConstMenu() {
 	constMenuEl = document.createElement('div');
 	constMenuEl.className = 'mode-menu';
 	constMenuEl.style.top = `${rect.bottom + 6 + window.scrollY}px`;
+	constMenuEl.style.minWidth = `${rect.width}px`;
 	const availableConstants = calc.listConstants();
 	const keys = [...constantOrder, ...Object.keys(availableConstants).filter((name) => !constantOrder.includes(name))];
 	keys.forEach((name) => {
@@ -472,9 +472,7 @@ function toggleConstMenu() {
 		constMenuEl.appendChild(button);
 	});
 	document.body.appendChild(constMenuEl);
-	const menuRect = constMenuEl.getBoundingClientRect();
-	const desiredLeft = rect.right + window.scrollX - menuRect.width;
-	constMenuEl.style.left = `${Math.max(8, desiredLeft)}px`;
+	constMenuEl.style.left = `${rect.left + window.scrollX}px`;
 }
 
 constButton.addEventListener('click', (event) => {