make bookmark dropdown items better looking

data/static/css/style.css

@@ -1316,14 +1316,17 @@ footer {
   border-radius: 4px;
   box-shadow: 0 0 30px rgba(0, 0, 0, 0.25);
   position: absolute;
-  right: 0;
+  margin: 0;
   min-width: 400px;
+  max-width: 400px;
   padding: 10px;
   z-index: 100;
+  color: unset;
 }
 
 .bookmark-dropdown-item {
   display: flex;
+  justify-content: space-between;
   padding: 10px 0;
   margin: 10px 0;
   cursor: pointer;
@@ -1342,6 +1345,7 @@ footer {
   width: 24px;
   height: 24px;
   padding: 0 10px;
+  flex-shrink: 0;
 }
 .bookmark-dropdown-item.selected {
   background-color: #beb1ce;
@@ -1358,6 +1362,17 @@ footer {
   justify-content: space-between;
 }
 
+.bookmark-dropdown-item-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.bookmark-dropdown-item-stats {
+  padding: 0 10px;
+  flex-shrink: 0;
+  margin-left: auto;
+}
+
 .bookmark-dropdown-items-container {
   max-height: 300px;
   overflow: scroll;

data/static/css/theme-otomotone.css

@@ -1316,14 +1316,17 @@ footer {
   border-radius: 4px;
   box-shadow: 0 0 30px rgba(0, 0, 0, 0.25);
   position: absolute;
-  right: 0;
+  margin: 0;
   min-width: 400px;
+  max-width: 400px;
   padding: 10px;
   z-index: 100;
+  color: unset;
 }
 
 .bookmark-dropdown-item {
   display: flex;
+  justify-content: space-between;
   padding: 10px 0;
   margin: 10px 0;
   cursor: pointer;
@@ -1342,6 +1345,7 @@ footer {
   width: 24px;
   height: 24px;
   padding: 0 10px;
+  flex-shrink: 0;
 }
 .bookmark-dropdown-item.selected {
   background-color: #8a5584;
@@ -1358,6 +1362,17 @@ footer {
   justify-content: space-between;
 }
 
+.bookmark-dropdown-item-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.bookmark-dropdown-item-stats {
+  padding: 0 10px;
+  flex-shrink: 0;
+  margin-left: auto;
+}
+
 .bookmark-dropdown-items-container {
   max-height: 300px;
   overflow: scroll;

data/static/css/theme-peachy.css

@@ -1316,14 +1316,17 @@ footer {
   border-radius: 16px;
   box-shadow: 0 0 30px rgba(0, 0, 0, 0.25);
   position: absolute;
-  right: 0;
+  margin: 0;
   min-width: 400px;
+  max-width: 400px;
   padding: 6px;
   z-index: 100;
+  color: unset;
 }
 
 .bookmark-dropdown-item {
   display: flex;
+  justify-content: space-between;
   padding: 6px 0;
   margin: 6px 0;
   cursor: pointer;
@@ -1342,6 +1345,7 @@ footer {
   width: 24px;
   height: 24px;
   padding: 0 6px;
+  flex-shrink: 0;
 }
 .bookmark-dropdown-item.selected {
   background-color: #b54444;
@@ -1358,6 +1362,17 @@ footer {
   justify-content: space-between;
 }
 
+.bookmark-dropdown-item-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.bookmark-dropdown-item-stats {
+  padding: 0 6px;
+  flex-shrink: 0;
+  margin-left: auto;
+}
+
 .bookmark-dropdown-items-container {
   max-height: 300px;
   overflow: scroll;

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 {