reponsive all

public/js/app.js

@@ -100,6 +100,9 @@ class AccountManager {
         this.selectedAssetIds = new Set();
         this.mobileBreakpoint = 900;
         this.boundResizeHandler = null;
+        this.boundMobileKeyHandler = null;
+        this.responsiveTableObserver = null;
+        this.responsiveTableUpdatePending = false;
         this.configureNotifications();
         this.initPromise = this.init();
         this.pendingAccountAppId = undefined;
@@ -338,6 +341,7 @@ class AccountManager {
         }
 
         this.restoreSearchFocus();
+        this.enhanceResponsiveTables(mainContent);
         this.updatePendingAssetRequestsBadge();
         this.setActiveNav(page);
     }
@@ -393,6 +397,18 @@ class AccountManager {
             window.addEventListener('resize', this.boundResizeHandler);
         }
 
+        if (!this.boundMobileKeyHandler) {
+            this.boundMobileKeyHandler = (event) => {
+                if (event.key === 'Escape' && document.body.classList.contains('mobile-nav-open')) {
+                    this.closeMobileNav();
+                    menuBtn?.focus();
+                }
+            };
+            document.addEventListener('keydown', this.boundMobileKeyHandler);
+        }
+
+        this.setupResponsiveTableObserver();
+
         if (!this.isMobileViewport()) {
             this.closeMobileNav();
         }
@@ -1017,6 +1033,55 @@ class AccountManager {
         }
     }
 
+    setupResponsiveTableObserver() {
+        const mainContent = document.getElementById('mainContent');
+        if (!mainContent || this.responsiveTableObserver || typeof MutationObserver === 'undefined') {
+            return;
+        }
+
+        this.responsiveTableObserver = new MutationObserver(() => {
+            if (this.responsiveTableUpdatePending) {
+                return;
+            }
+
+            this.responsiveTableUpdatePending = true;
+            window.requestAnimationFrame(() => {
+                this.responsiveTableUpdatePending = false;
+                this.enhanceResponsiveTables(mainContent);
+            });
+        });
+
+        this.responsiveTableObserver.observe(mainContent, {
+            childList: true,
+            subtree: true
+        });
+    }
+
+    enhanceResponsiveTables(root = document) {
+        if (!root?.querySelectorAll) {
+            return;
+        }
+
+        root.querySelectorAll('table:not(.keep-table-mobile)').forEach(table => {
+            table.classList.add('mobile-card-table');
+
+            const headers = Array.from(table.querySelectorAll('thead th')).map((header, index) => {
+                return String(header.textContent || '').trim() || `Cột ${index + 1}`;
+            });
+
+            table.querySelectorAll('tbody tr').forEach(row => {
+                Array.from(row.children).forEach((cell, index) => {
+                    if (cell.tagName !== 'TD' || cell.hasAttribute('colspan')) {
+                        return;
+                    }
+
+                    const headerIndex = Number.isInteger(cell.cellIndex) ? cell.cellIndex : index;
+                    cell.dataset.label = headers[headerIndex] || `Cột ${headerIndex + 1}`;
+                });
+            });
+        });
+    }
+
     refreshConsumableExportProjectOptions(selectedValue = '') {
         const select = document.getElementById('consumableExportProjectInput');
         if (!select) {