dans resultat recent on doit pouvoir avoir tout d'afficher a l'ecran ou de pouvoir faire bouger la ligne de droite a gauche - Follow Up Deployment

index.html

@@ -86,7 +86,11 @@
                         <a href="#" class="block px-4 py-2 text-sm hover:bg-gray-700">Settings</a>
                         <a href="#" class="block px-4 py-2 text-sm hover:bg-gray-700">Logout</a>
                     </div>
+                    </div>
                 </div>
+                <button class="absolute right-0 top-1/2 -translate-y-1/2 z-10 bg-gray-800 hover:bg-gray-700 w-8 h-8 rounded-full flex items-center justify-center text-xl">
+                    <i class="fas fa-chevron-right"></i>
+                </button>
             </div>
         </div>
     </header>
@@ -471,8 +475,12 @@
         <section class="mb-8">
             <h2 class="text-xl font-bold mb-4">RECENT RESULTS</h2>
             
-            <div class="overflow-x-auto scrollbar-hide">
-                <div class="flex space-x-4" style="min-width: max-content;">
+            <div class="relative">
+                <button class="absolute left-0 top-1/2 -translate-y-1/2 z-10 bg-gray-800 hover:bg-gray-700 w-8 h-8 rounded-full flex items-center justify-center text-xl">
+                    <i class="fas fa-chevron-left"></i>
+                </button>
+                <div class="overflow-x-auto scrollbar-hide scroll-smooth" id="resultsContainer">
+                    <div class="flex space-x-4" style="min-width: max-content;">
                     <!-- Match 1 -->
                     <div class="bg-gray-800 rounded-xl p-4 min-w-64">
                         <div class="flex justify-between items-center mb-3">
@@ -941,6 +949,42 @@
             reputationElement.textContent = currentRep;
         }, 5000);
         
+        // Recent results navigation
+        const resultsContainer = document.getElementById('resultsContainer');
+        const scrollAmount = 300; // Adjust this value as needed
+        
+        document.querySelectorAll('[class*="fa-chevron"]').forEach(button => {
+            button.addEventListener('click', () => {
+                if (button.classList.contains('fa-chevron-left')) {
+                    resultsContainer.scrollBy({ left: -scrollAmount, behavior: 'smooth' });
+                } else {
+                    resultsContainer.scrollBy({ left: scrollAmount, behavior: 'smooth' });
+                }
+            });
+        });
+
+        // Touch support for mobile
+        let touchStartX = 0;
+        let touchEndX = 0;
+        
+        resultsContainer.addEventListener('touchstart', e => {
+            touchStartX = e.changedTouches[0].screenX;
+        }, {passive: true});
+        
+        resultsContainer.addEventListener('touchend', e => {
+            touchEndX = e.changedTouches[0].screenX;
+            handleSwipe();
+        }, {passive: true});
+        
+        function handleSwipe() {
+            if (touchEndX < touchStartX) {
+                resultsContainer.scrollBy({ left: scrollAmount, behavior: 'smooth' });
+            }
+            if (touchEndX > touchStartX) {
+                resultsContainer.scrollBy({ left: -scrollAmount, behavior: 'smooth' });
+            }
+        }
+
         // Animate match simulation progress bars
         const progressBars = document.querySelectorAll('.w-full.bg-gray-700.h-2.rounded-full div');
         progressBars.forEach(bar => {