feat: Enhance mobile responsiveness for container and modal styles in main and admin templates

feat: Simplify scheduled job setup by removing dynamic update timing and buffer management
feat: Improve mobile layout handling for item loading indicators and prefetching logic
2026-04-17 19:18:46 +02:00 · 2026-04-17 19:08:45 +02:00 · 2026-04-17 19:05:34 +02:00 · 2026-04-17 18:58:10 +02:00
3 changed files with 113 additions and 36 deletions
@@ -155,10 +155,12 @@ select:focus {

@media (max-width: 900px) {
    .container {
-        width: calc(100% - 18px);
-        padding: 14px;
-        margin: 10px auto;
-        border-radius: 10px;
+        width: 100%;
+        max-width: 100%;
+        padding: 12px 12px 18px;
+        margin: 0;
+        border-radius: 0;
+        box-sizing: border-box;
    }
 }

@@ -774,8 +774,18 @@
            return;
        }

-        const distanceToEnd = itemsContainer.scrollWidth - (itemsContainer.scrollLeft + itemsContainer.clientWidth);
-        const prefetchThreshold = Math.max(260, itemsContainer.clientWidth * 1.4);
+        const styles = window.getComputedStyle(itemsContainer);
+        const isMobileLayout =
+            window.matchMedia('(max-width: 768px)').matches ||
+            styles.display === 'grid' ||
+            styles.flexDirection === 'column';
+
+        const distanceToEnd = isMobileLayout
+            ? itemsContainer.scrollHeight - (itemsContainer.scrollTop + itemsContainer.clientHeight)
+            : itemsContainer.scrollWidth - (itemsContainer.scrollLeft + itemsContainer.clientWidth);
+        const prefetchThreshold = isMobileLayout
+            ? Math.max(220, itemsContainer.clientHeight * 0.9)
+            : Math.max(260, itemsContainer.clientWidth * 1.4);
        if (distanceToEnd > prefetchThreshold) {
            return;
        }
@@ -1142,6 +1152,12 @@
        const itemsContainer = ensureMainItemsSentinel();
        if (!itemsContainer) return;

+        const styles = window.getComputedStyle(itemsContainer);
+        const isMobileLayout =
+            window.matchMedia('(max-width: 768px)').matches ||
+            styles.display === 'grid' ||
+            styles.flexDirection === 'column';
+
        if (mainItemsObserver) {
            mainItemsObserver.disconnect();
            mainItemsObserver = null;
@@ -1172,7 +1188,7 @@
        }, {
            root: itemsContainer,
            threshold: 0.15,
-            rootMargin: '0px 900px 0px 0px'
+            rootMargin: isMobileLayout ? '0px 0px 900px 0px' : '0px 900px 0px 0px'
        });

        mainItemsObserver.observe(mainItemsSentinel);
@@ -2942,6 +2958,22 @@
        animation: items-loader-slide 1.05s ease-in-out infinite;
    }

+    @media (max-width: 768px) {
+        .items-loading-indicator {
+            width: 100%;
+            min-width: 0;
+            max-width: none;
+            min-height: 120px;
+            height: auto;
+            padding: 14px 10px;
+            scroll-snap-align: none;
+        }
+
+        .items-loading-indicator .loading-track {
+            width: min(240px, 82%);
+        }
+    }
+
    @keyframes items-loader-slide {
        0% { transform: translateX(-100%); }
        100% { transform: translateX(260%); }
@@ -3342,9 +3374,12 @@
        
        /* Mobile-responsive styles for user interface */
        .container {
-            width: 95% !important;
-            margin: 10px auto !important;
-            padding: 15px !important;
+            width: 100% !important;
+            max-width: 100% !important;
+            margin: 0 !important;
+            padding: 12px 12px 18px !important;
+            border-radius: 0 !important;
+            box-sizing: border-box !important;
        }
        
        h1, h2 {
@@ -3414,7 +3449,7 @@
            display: grid !important;
            grid-template-columns: 1fr !important;
            gap: 15px !important;
-            padding: 10px 0 !important;
+            padding: 10px 0 0 !important;
            overflow-x: visible !important;
        }
        
@@ -3431,12 +3466,12 @@
        
        /* Modal improvements for mobile */
        .modal-content {
-            width: 95% !important;
-            max-width: 500px !important;
-            margin: 20px auto !important;
+            width: calc(100vw - 16px) !important;
+            max-width: none !important;
+            margin: 8px auto !important;
            max-height: 85vh !important;
            overflow-y: auto !important;
-            padding: 20px !important;
+            padding: 16px !important;
        }
        
        /* Button improvements */
@@ -369,6 +369,22 @@
        animation: items-loader-slide 1.05s ease-in-out infinite;
    }

+    @media (max-width: 768px) {
+        .items-loading-indicator {
+            width: 100%;
+            min-width: 0;
+            max-width: none;
+            min-height: 120px;
+            height: auto;
+            padding: 14px 10px;
+            scroll-snap-align: none;
+        }
+
+        .items-loading-indicator .loading-track {
+            width: min(240px, 82%);
+        }
+    }
+
    @keyframes items-loader-slide {
        0% { transform: translateX(-100%); }
        100% { transform: translateX(260%); }
@@ -1221,9 +1237,11 @@
        
        /* Mobile-responsive styles for admin interface */
        .admin-content-container {
-            width: 95% !important;
-            margin: 10px auto !important;
-            padding: 15px !important;
+            width: 100% !important;
+            max-width: 100% !important;
+            margin: 0 !important;
+            padding: 12px 12px 18px !important;
+            box-sizing: border-box !important;
            overflow-x: hidden !important;
        }
        
@@ -1347,11 +1365,12 @@
        
        /* Modal improvements for admin */
        .modal-content {
-            width: 95% !important;
-            max-width: 500px !important;
-            margin: 20px auto !important;
+            width: calc(100vw - 16px) !important;
+            max-width: none !important;
+            margin: 8px auto !important;
            max-height: 85vh !important;
            overflow-y: auto !important;
+            padding: 16px !important;
        }
        
        /* Admin card improvements */
@@ -1510,9 +1529,11 @@
    /* Mobile-responsive styles for admin interface */
    @media screen and (max-width: 768px) {
        .admin-content-container {
-            width: 95% !important;
-            margin: 10px auto !important;
-            padding: 15px !important;
+            width: 100% !important;
+            max-width: 100% !important;
+            margin: 0 !important;
+            padding: 12px 12px 18px !important;
+            box-sizing: border-box !important;
        }
        
        h1, h2 {
@@ -1599,12 +1620,12 @@
        
        /* Modal improvements for admin */
        .modal-content {
-            width: 95% !important;
-            max-width: 500px !important;
-            margin: 20px auto !important;
+            width: calc(100vw - 16px) !important;
+            max-width: none !important;
+            margin: 8px auto !important;
            max-height: 85vh !important;
            overflow-y: auto !important;
-            padding: 20px !important;
+            padding: 16px !important;
        }
        
        /* Button improvements */
@@ -1792,9 +1813,11 @@
        }
        
        .admin-content-container {
-            width: 95%;
-            margin: 10px auto;
-            padding: 15px;
+            width: 100%;
+            max-width: 100%;
+            margin: 0;
+            padding: 12px 12px 18px;
+            box-sizing: border-box;
            overflow-x: hidden;
        }
        
@@ -1808,12 +1831,13 @@
        
        /* Better modal sizing for mobile */
        .modal-content {
-            width: 95% !important;
+            width: calc(100vw - 16px) !important;
            max-width: none !important;
-            margin: 10px auto !important;
+            margin: 8px auto !important;
            max-height: 90vh !important;
            overflow-y: auto !important;
            -webkit-overflow-scrolling: touch !important;
+            padding: 16px !important;
        }
    }

@@ -3366,8 +3390,18 @@ document.addEventListener('DOMContentLoaded', ()=>{
            return;
        }

-        const distanceToEnd = itemsContainer.scrollWidth - (itemsContainer.scrollLeft + itemsContainer.clientWidth);
-        const prefetchThreshold = Math.max(260, itemsContainer.clientWidth * 1.4);
+        const styles = window.getComputedStyle(itemsContainer);
+        const isMobileLayout =
+            window.matchMedia('(max-width: 768px)').matches ||
+            styles.display === 'grid' ||
+            styles.flexDirection === 'column';
+
+        const distanceToEnd = isMobileLayout
+            ? itemsContainer.scrollHeight - (itemsContainer.scrollTop + itemsContainer.clientHeight)
+            : itemsContainer.scrollWidth - (itemsContainer.scrollLeft + itemsContainer.clientWidth);
+        const prefetchThreshold = isMobileLayout
+            ? Math.max(220, itemsContainer.clientHeight * 0.9)
+            : Math.max(260, itemsContainer.clientWidth * 1.4);
        if (distanceToEnd > prefetchThreshold) {
            return;
        }
@@ -3729,6 +3763,12 @@ document.addEventListener('DOMContentLoaded', ()=>{
        const itemsContainer = ensureMainAdminItemsSentinel();
        if (!itemsContainer) return;

+        const styles = window.getComputedStyle(itemsContainer);
+        const isMobileLayout =
+            window.matchMedia('(max-width: 768px)').matches ||
+            styles.display === 'grid' ||
+            styles.flexDirection === 'column';
+
        if (mainAdminItemsObserver) {
            mainAdminItemsObserver.disconnect();
            mainAdminItemsObserver = null;
@@ -3759,7 +3799,7 @@ document.addEventListener('DOMContentLoaded', ()=>{
        }, {
            root: itemsContainer,
            threshold: 0.15,
-            rootMargin: '0px 900px 0px 0px'
+            rootMargin: isMobileLayout ? '0px 0px 900px 0px' : '0px 900px 0px 0px'
        });

        mainAdminItemsObserver.observe(mainAdminItemsSentinel);
Author	SHA1	Message	Date
Aiirondev_dev	06c2270842	feat: Enhance mobile responsiveness for container and modal styles in main and admin templates	2026-04-17 19:18:46 +02:00
Aiirondev_dev	20556f3500	feat: Simplify scheduled job setup by removing dynamic update timing and buffer management	2026-04-17 19:08:45 +02:00
Aiirondev_dev	7f1d616bb3	feat: Improve mobile layout handling for item loading indicators and prefetching logic	2026-04-17 19:05:34 +02:00
Aiirondev_dev	09cea7a0f8	feat: Implement update scheduling with dynamic timing and update buffer management	2026-04-17 18:58:10 +02:00