Add javascript marquee effect for overflowing text on card badge names

static/js/base.js

@@ -112,10 +112,30 @@ const $$ = selector => Array.from(document.querySelector(selector));
     });
   }
 
-  // On DOMContentLoaded, initialize theme toggling and form processing.
+  /**
+   * Process all elements with the 'marquee' class.
+   * For each element, if its content is overflowing (using isElementOverflowing),
+   * wrap its innerHTML within a <marquee> tag and remove the 'marquee' class.
+   */
+  function processMarqueeElements() {
+    document.querySelectorAll('.marquee-calc').forEach(element => {
+      console.log(element.innerHTML, element.offsetWidth, element.scrollWidth);
+      if (element.offsetWidth >= 148 || element.offsetWidth < element.scrollWidth) {
+        element.innerHTML = '<marquee behavior="scroll" direction="left" scrolldelay="80">' + element.innerHTML + '</marquee>';
+      }
+      
+      element.classList.remove('marquee-calc');
+    });
+  }
+
+  // Expose processMarqueeElements to be available for AJAX-loaded partial updates.
+  window.processMarqueeElements = processMarqueeElements;
+
+  // On DOMContentLoaded, initialize theme toggling, form processing, and marquee wrapping.
   document.addEventListener("DOMContentLoaded", () => {
     initThemeToggle();
     initCardMultiselectHandling();
+    processMarqueeElements();
   });
 
   // On pageshow, only reset multiselect state if the page was loaded from bfcache.