Waste: bigger fonts, auto-fit badge row, 5-min rotation

assets/css/style.css

@@ -493,7 +493,7 @@ body {
 .aw-cmp-legend {
     display: flex;
     justify-content: space-between;
-    font-size: 0.68rem;
+    font-size: 0.74rem;
     font-weight: 600;
     margin-bottom: 3px;
 }
@@ -524,20 +524,21 @@ body {
     display: inline-flex;
     align-items: center;
     gap: 5px;
-    padding: 4px 9px;
+    padding: 5px 10px;
     border-radius: 10px;
-    font-size: 0.72rem;
+    font-size: 0.78rem;
     font-weight: 600;
     border: 1px solid transparent;
+    white-space: nowrap;
 }
-.aw-badge-icon { font-size: 0.85rem; flex-shrink: 0; }
+.aw-badge-icon { font-size: 0.92rem; flex-shrink: 0; }
 .aw-badge-body {
     display: flex;
     flex-direction: column;
-    line-height: 1.2;
+    line-height: 1.25;
 }
-.aw-badge-body b { font-size: 0.78rem; }
-.aw-badge-body small { font-size: 0.6rem; font-weight: 500; opacity: .75; }
+.aw-badge-body b { font-size: 0.86rem; }
+.aw-badge-body small { font-size: 0.66rem; font-weight: 500; opacity: .75; }
 .aw-badge-rate   { background: #f5f3ff; color: #5b21b6; border-color: #c4b5fd; }
 .aw-badge-money  { background: #fef9c3; color: #854d0e; border-color: #fde047; }
 .aw-badge-meals  { background: #f0fdf4; color: #166534; border-color: #86efac; }
@@ -565,7 +566,7 @@ body {
 .aw-tcard-empty { background: var(--bg-main); border-color: var(--border); opacity: 0.45; }
 .aw-tc-label {
     display: block;
-    font-size: 0.57rem;
+    font-size: 0.63rem;
     color: var(--text-light);
     margin-bottom: 1px;
     text-transform: uppercase;
@@ -573,7 +574,7 @@ body {
 }
 .aw-tc-rate {
     display: block;
-    font-size: 1.05rem;
+    font-size: 1.1rem;
     font-weight: 900;
     line-height: 1;
     margin-bottom: 4px;
@@ -607,7 +608,7 @@ body {
 }
 .aw-fact-icon { font-size: 0.76rem; flex-shrink: 0; padding-top: 1px; }
 .aw-fact-text {
-    font-size: 0.7rem;
+    font-size: 0.76rem;
     color: #0369a1;
     line-height: 1.4;
     flex: 1;

assets/js/app.js

@@ -2208,10 +2208,11 @@ function _startAntiWasteAutoRefresh() {
 }
 
 /**
- * Start badge rotation: shows maxVisible badges at a time, cycles through all
- * with a fade-out/fade-in once per hour (aligned to the next clock-hour boundary).
+ * Start badge rotation: shows only as many badges as fit in one row (auto-measured),
+ * cycles through all with a fade every 5 minutes.
+ * Call AFTER the row is already in the DOM with the initial slice rendered.
  */
-function _startBadgeRotation(allBadges, maxVisible = 4) {
+function _startBadgeRotation(allBadges, maxVisible) {
     clearInterval(_awBadgeTimer);
     const row = document.getElementById('aw-badges-row');
     if (!row || allBadges.length <= maxVisible) return;
@@ -2235,12 +2236,8 @@ function _startBadgeRotation(allBadges, maxVisible = 4) {
         }, 380);
     };
 
-    // Fire once per hour, aligned to next full clock-hour
-    const msToNextHour = (60 - new Date().getMinutes()) * 60_000 - new Date().getSeconds() * 1000;
-    setTimeout(() => {
-        rotate();
-        _awBadgeTimer = setInterval(rotate, 3_600_000); // then every hour
-    }, msToNextHour);
+    // Rotate every 5 minutes
+    _awBadgeTimer = setInterval(rotate, 5 * 60_000);
 }
 
 /** Build one trend mini-card. */
@@ -2358,9 +2355,9 @@ function _renderAntiWasteSection(used30, wasted30, usedP30, wastedP30, usedP60,
         <span class="aw-badge-body"><b>−${diffPct}%</b><small>${t('antiwaste.badge_better')}</small></span>
     </span>`);
 
-    // Initial 4-badge slice (centered via CSS justify-content:center)
-    const MAX_VISIBLE = 4;
-    const initBadges  = allBadges.slice(0, MAX_VISIBLE).join('');
+    // Initial render: show all badges (row uses nowrap so they overflow off-screen, no wrapping)
+    // We'll measure and trim in requestAnimationFrame below.
+    const initBadges = allBadges.join('');
 
     // Facts
     const facts   = _awGetFacts();
@@ -2408,16 +2405,40 @@ function _renderAntiWasteSection(used30, wasted30, usedP30, wastedP30, usedP60,
         <div class="aw-source">${(_awLiveFacts && _awLiveFacts.source) || t('antiwaste.source')}</div>
     `;
 
-    // Animate comparison bars after DOM insertion
+    // After DOM insertion: animate bars + measure how many badges actually fit in one row
     requestAnimationFrame(() => {
+        // Animate comparison bars
         const barYou = document.getElementById('aw-bar-you');
         const barAvg = document.getElementById('aw-bar-avg');
         if (barYou) { barYou.style.width = youPct + '%'; setTimeout(() => barYou.classList.add('loaded'), 100); }
         if (barAvg) { barAvg.style.width = avgPct + '%'; setTimeout(() => barAvg.classList.add('loaded'), 100); }
-    });
 
-    // Badge rotation: 4 at a time, every hour
-    _startBadgeRotation(allBadges, MAX_VISIBLE);
+        // Measure how many badges fit in one row
+        const row = document.getElementById('aw-badges-row');
+        if (!row || !allBadges.length) return;
+
+        const GAP = 6; // matches CSS gap
+        const rowW = row.offsetWidth;
+
+        // Measure each badge width by reading the rendered children
+        const kids = [...row.children];
+        let totalW = 0;
+        let fit = 0;
+        for (const el of kids) {
+            const bw = el.offsetWidth;
+            if (fit > 0) totalW += GAP;
+            totalW += bw;
+            if (totalW > rowW + 1) break; // +1 for sub-pixel rounding
+            fit++;
+        }
+        fit = Math.max(1, fit);
+
+        // Trim visible row to the fit count
+        row.innerHTML = allBadges.slice(0, fit).join('');
+
+        // Start rotation only if there are more badges than fit
+        _startBadgeRotation(allBadges, fit);
+    });
 
     // Fact rotation (every 6 s)
     if (_awFactTimer) clearInterval(_awFactTimer);