make bookmark dropdown items better looking

data/static/js/bitties/pyrom-bitty.js

@@ -15,19 +15,39 @@ export default class {
       const frag = res.value;
       el.appendChild(frag);
       const menu = el.childNodes[0];
-      const bRect = el.getBoundingClientRect()
-      if (bRect.left < window.innerWidth - bRect.right) {
-        menu.style.right = 'unset';
+      menu.showPopover();
+
+      const bRect = el.getBoundingClientRect();
+      const menuRect = menu.getBoundingClientRect();
+      const preferredLeft = bRect.right - menuRect.width;
+      const preferredRight = bRect.right;
+      const enoughSpace = preferredLeft >= 0;
+      const scrollY = window.scrollY || window.pageYOffset;
+      if (enoughSpace) {
+        menu.style.left = `${preferredLeft}px`;
+      } else {
+        menu.style.left = `${bRect.left}px`;
       }
+      menu.style.top = `${bRect.bottom + scrollY}px`;
+
+      menu.addEventListener('beforetoggle', (e) => {
+        if (e.newState === 'closed') {
+          // if it's still in the tree, remove it
+          // the delay is required to make sure its removed instantly when
+          // clicking the button when the menu is open
+          setTimeout(() => {menu.remove()}, 100);
+        };
+      }, { once: true });
+
     } else if (el.childElementCount > 0) {
       el.removeChild(el.childNodes[0]);
     }
   }
 
   selectBookmarkCollection(ev, el) {
-    const clicked = ev.target;
+    const clicked = ev.sender;
 
-    if (clicked === el) {
+    if (ev.sender === el) {
       if (clicked.classList.contains('selected')) {
         clicked.classList.remove('selected');
       } else {