perf: Refactor menu item height synchronization to prevent layout thrashing and introduce a debounced resize listener.

src/events.js

@@ -1,9 +1,10 @@
 import { displayMode, langMode, authToken, currentUser, orderMap, userFlags, pollIntervalId, setLangMode, setDisplayMode, setAuthToken, setCurrentUser, setOrderMap } from './state.js';
 import { updateAuthUI, loadMenuDataFromAPI, fetchOrders, startPolling, stopPolling, fetchFullOrderHistory, addHighlightTag, renderTagsList, refreshFlaggedItems } from './actions.js';
-import { renderVisibleWeeks, openVersionMenu, updateNextWeekBadge, updateAlarmBell } from './ui_helpers.js';
+import { renderVisibleWeeks, openVersionMenu, updateNextWeekBadge, updateAlarmBell, syncMenuItemHeights } from './ui_helpers.js';
 import { API_BASE, GUEST_TOKEN, LS } from './constants.js';
 import { apiHeaders } from './api.js';
 import { t } from './i18n.js';
+import { debounce } from './utils.js';
 
 /**
  * Updates all static UI labels/tooltips to match the current language.
@@ -364,4 +365,10 @@ export function bindEvents() {
         updateAuthUI();
         renderVisibleWeeks();
     });
+
+    // Sync heights on window resize (FR-Performance)
+    window.addEventListener('resize', debounce(() => {
+        const grid = document.querySelector('.days-grid');
+        if (grid) syncMenuItemHeights(grid);
+    }, 150));
 }

src/ui_helpers.js

@@ -149,23 +149,39 @@ export function renderVisibleWeeks() {
 export function syncMenuItemHeights(grid) {
     const cards = grid.querySelectorAll('.menu-card');
     if (cards.length === 0) return;
+
+    // 1. Gather all menu-item groups (rows) across cards
+    const itemRows = [];
     let maxItems = 0;
-    cards.forEach(card => {
-        maxItems = Math.max(maxItems, card.querySelectorAll('.menu-item').length);
+
+    const cardItems = Array.from(cards).map(card => {
+        const items = Array.from(card.querySelectorAll('.menu-item'));
+        maxItems = Math.max(maxItems, items.length);
+        return items;
     });
+
     for (let i = 0; i < maxItems; i++) {
-        let maxHeight = 0;
-        const itemsAtPos = [];
-        cards.forEach(card => {
-            const items = card.querySelectorAll('.menu-item');
-            if (items[i]) {
-                items[i].style.height = 'auto';
-                maxHeight = Math.max(maxHeight, items[i].offsetHeight);
-                itemsAtPos.push(items[i]);
-            }
-        });
-        itemsAtPos.forEach(item => { item.style.height = `${maxHeight}px`; });
+        // Collect i-th item from each card (forming a "row")
+        itemRows[i] = cardItems.map(items => items[i]).filter(item => !!item);
     }
+
+    // 2. Batch Reset (Write phase) - clear old heights to let them flow naturally
+    itemRows.flat().forEach(item => {
+        item.style.height = 'auto';
+    });
+
+    // 3. Batch Read (Read phase) - measure all heights in one pass to avoid layout thrashing
+    const rowMaxHeights = itemRows.map(row => {
+        return Math.max(...row.map(item => item.offsetHeight));
+    });
+
+    // 4. Batch Apply (Write phase) - set synchronized heights
+    itemRows.forEach((row, i) => {
+        const height = `${rowMaxHeights[i]}px`;
+        row.forEach(item => {
+            item.style.height = height;
+        });
+    });
 }
 
 export function createDayCard(day) {

src/utils.js

@@ -246,3 +246,15 @@ export function getLocalizedText(text) {
     if (langMode === 'en') return split.en || split.raw;
     return split.de || split.raw;
 }
+
+export function debounce(func, wait) {
+    let timeout;
+    return function executedFunction(...args) {
+        const later = () => {
+            clearTimeout(timeout);
+            func(...args);
+        };
+        clearTimeout(timeout);
+        timeout = setTimeout(later, wait);
+    };
+}