From 392ca2e24cc93a3918d07718f40524857d626d14 Mon Sep 17 00:00:00 2001
From: Simon Willison <swillison@gmail.com>
Date: Mon, 19 Feb 2024 13:40:48 -0800
Subject: [PATCH] Improvements to table column cog menu display, closes #2263

- Repositions if menu would cause a horizontal scrollbar
- Arrow tip on menu now attempts to align with cog icon on column
---
 datasette/static/table.js | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/datasette/static/table.js b/datasette/static/table.js
index 778457c5..0c54a472 100644
--- a/datasette/static/table.js
+++ b/datasette/static/table.js
@@ -217,6 +217,17 @@ const initDatasetteTable = function (manager) {
       menuList.appendChild(menuItem);
     });
 
+    // Measure width of menu and adjust position if too far right
+    const menuWidth = menu.offsetWidth;
+    const windowWidth = window.innerWidth;
+    if (menuLeft + menuWidth > windowWidth) {
+      menu.style.left = windowWidth - menuWidth - 20 + "px";
+    }
+    // Align menu .hook arrow with the column cog icon
+    const hook = menu.querySelector('.hook');
+    const icon = th.querySelector('.dropdown-menu-icon');
+    const iconRect = icon.getBoundingClientRect();
+    hook.style.left = (iconRect.left - menuLeft + 1) + 'px';
   }
 
   var svg = document.createElement("div");