Feature: Forum Tab-Pills — Marquee-Scroll bei Hover für abgeschnittenen Text, SW by-v595

backend/static/css/components.css

@@ -4179,6 +4179,19 @@ html.modal-open {
   text-overflow: ellipsis;
   max-width:     10rem;  /* prevents single pill from being wider than ~160px on mobile */
 }
+.by-tab-text {
+  display:    inline-block;
+  white-space: nowrap;
+  transition: transform 0.3s ease;
+}
+.by-tab-text.scrolling {
+  animation:  forum-tab-scroll 1.8s ease-in-out 0.3s infinite alternate;
+  transition: none;
+}
+@keyframes forum-tab-scroll {
+  from { transform: translateX(0); }
+  to   { transform: translateX(var(--tab-scroll-px, 0)); }
+}
 
 /* Category badge (colored pill) */
 .forum-category-badge {

backend/static/js/app.js

@@ -3,7 +3,7 @@
    Router, State-Management, Navigation, Initialisierung.
    ============================================================ */
 
-const APP_VER     = '594'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
+const APP_VER     = '595'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
 const APP_VERSION = '1.2.1'; // ← semantische Version, wird bei make release gesetzt
 const IS_STAGING  = location.hostname === 'staging.banyaro.app';
 

backend/static/js/pages/forum.js

@@ -99,10 +99,10 @@ window.Page_forum = (() => {
         <div class="forum-category-tabs by-tabs" id="forum-tabs">
           ${KATEGORIEN.map(k => `
             <button class="by-tab ${k.key === _aktivKat ? 'active' : ''}"
-                    data-kat="${k.key}">${_esc(k.label)}</button>
+                    data-kat="${k.key}"><span class="by-tab-text">${_esc(k.label)}</span></button>
           `).join('')}
           <button class="by-tab ${_activeSection === 'map' ? 'active' : ''}"
-                  data-section="map">${UI.icon('users')} Mitgliederkarte</button>
+                  data-section="map"><span class="by-tab-text">${UI.icon('users')} Mitgliederkarte</span></button>
         </div>
 
         <!-- Rechte Spalte: HdM-Kachel + Suche + Threads -->
@@ -130,6 +130,21 @@ window.Page_forum = (() => {
     const _tabCount = _tabsEl.querySelectorAll('.by-tab').length;
     _tabsEl.style.setProperty('--forum-tab-cols', Math.ceil(_tabCount / 2));
 
+    // Marquee-Scroll: nur Tabs animieren, bei denen Text wirklich abgeschnitten ist
+    _tabsEl.addEventListener('mouseenter', e => {
+      const btn  = e.target.closest('.by-tab');
+      const span = btn?.querySelector('.by-tab-text');
+      if (!span) return;
+      const overflow = span.scrollWidth - btn.clientWidth;
+      if (overflow <= 2) return;
+      span.style.setProperty('--tab-scroll-px', `-${overflow}px`);
+      span.classList.add('scrolling');
+    }, true);
+    _tabsEl.addEventListener('mouseleave', e => {
+      const span = e.target.closest('.by-tab')?.querySelector('.by-tab-text');
+      if (span) span.classList.remove('scrolling');
+    }, true);
+
     // Tab-Klicks
     _tabsEl.addEventListener('click', e => {
       const btn = e.target.closest('[data-kat], [data-section]');

backend/static/sw.js

@@ -3,7 +3,7 @@
    Offline-Cache + Push Notifications + Tile-Cache
    ============================================================ */
 
-const CACHE_VERSION = 'by-v594';
+const CACHE_VERSION = 'by-v595';
 const CACHE_STATIC  = `${CACHE_VERSION}-static`;
 const CACHE_TILES   = 'ban-yaro-tiles-v1';  // bleibt über SW-Updates erhalten
 const CACHE_API     = 'ban-yaro-api-v1';    // API-Response-Cache