scrollbar also top

public/userarea/imported.php

@@ -463,6 +463,21 @@ $gridMeta = [
             position: relative;
         }
 
+        .top-scrollbar {
+            overflow-x: auto;
+            overflow-y: hidden;
+            width: 100%;
+            height: 18px;
+            margin-bottom: 8px;
+            border: 1px solid #dee2e6;
+            border-radius: 0.25rem;
+            background: #f8f9fa;
+        }
+
+        .top-scrollbar-inner {
+            height: 1px;
+        }
+
         .grid-row {
             display: flex;
             align-items: center;
@@ -1239,7 +1254,11 @@ $gridMeta = [
                     </div>
                     <div class="card-body">
                         <form id="editForm">
-                            <div class="grid-container">
+                            <div class="top-scrollbar" id="topScrollbar">
+                                <div class="top-scrollbar-inner" id="topScrollbarInner"></div>
+                            </div>
+
+                            <div class="grid-container" id="gridContainer">
                                 <div class="grid-top" id="gridTopContainer"></div>
                                 <div class="grid-row" id="gridHeaderContainer" style="font-weight:600;"></div>
                                 <div id="gridRowContainer"></div>
@@ -1277,6 +1296,53 @@ $gridMeta = [
     <script src="partsTable.js"></script>
     <script src="analysisModal.js"></script>
 
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const topScrollbar = document.getElementById('topScrollbar');
+            const topScrollbarInner = document.getElementById('topScrollbarInner');
+            const gridContainer = document.getElementById('gridContainer');
+
+            if (!topScrollbar || !topScrollbarInner || !gridContainer) return;
+
+            let syncingFromTop = false;
+            let syncingFromGrid = false;
+
+            function updateTopScrollbarWidth() {
+                topScrollbarInner.style.width = gridContainer.scrollWidth + 'px';
+
+                // Mostra la barra solo se serve davvero
+                if (gridContainer.scrollWidth > gridContainer.clientWidth) {
+                    topScrollbar.style.display = 'block';
+                } else {
+                    topScrollbar.style.display = 'none';
+                }
+            }
+
+            topScrollbar.addEventListener('scroll', function() {
+                if (syncingFromGrid) return;
+                syncingFromTop = true;
+                gridContainer.scrollLeft = topScrollbar.scrollLeft;
+                syncingFromTop = false;
+            });
+
+            gridContainer.addEventListener('scroll', function() {
+                if (syncingFromTop) return;
+                syncingFromGrid = true;
+                topScrollbar.scrollLeft = gridContainer.scrollLeft;
+                syncingFromGrid = false;
+            });
+
+            updateTopScrollbarWidth();
+
+            window.addEventListener('resize', updateTopScrollbarWidth);
+
+            // Ritarda un attimo per sicurezza, visto che la griglia viene renderizzata via JS
+            setTimeout(updateTopScrollbarWidth, 200);
+            setTimeout(updateTopScrollbarWidth, 600);
+            setTimeout(updateTopScrollbarWidth, 1200);
+        });
+    </script>
+
     <div class="modal fade" id="exportConfirmModal" tabindex="-1" aria-labelledby="exportConfirmModalLabel" aria-hidden="true">
         <div class="modal-dialog">
             <div class="modal-content">