From b431f1d4e900cd92d1e5667759c90f506a2c0695 Mon Sep 17 00:00:00 2001
From: solocla <info@claudiosironi.com>
Date: Wed, 13 May 2026 14:22:43 +0200
Subject: [PATCH] added top scrollbar imported

---
 public/userarea/imported.php | 39 +++++++++++++++++++++++++++---------
 1 file changed, 30 insertions(+), 9 deletions(-)

diff --git a/public/userarea/imported.php b/public/userarea/imported.php
index 91498e5..b005cf4 100644
--- a/public/userarea/imported.php
+++ b/public/userarea/imported.php
@@ -1410,6 +1410,9 @@ $gridMeta = [
             const topScrollbar = document.getElementById('topScrollbar');
             const topScrollbarInner = document.getElementById('topScrollbarInner');
             const gridContainer = document.getElementById('gridContainer');
+            const gridRowContainer = document.getElementById('gridRowContainer');
+            const gridHeaderContainer = document.getElementById('gridHeaderContainer');
+            const gridTopContainer = document.getElementById('gridTopContainer');
 
             if (!topScrollbar || !topScrollbarInner || !gridContainer) return;
 
@@ -1417,14 +1420,22 @@ $gridMeta = [
             let syncingFromGrid = false;
 
             function updateTopScrollbarWidth() {
-                topScrollbarInner.style.width = gridContainer.scrollWidth + 'px';
+                const realWidth = Math.max(
+                    gridContainer.scrollWidth,
+                    gridHeaderContainer ? gridHeaderContainer.scrollWidth : 0,
+                    gridTopContainer ? gridTopContainer.scrollWidth : 0,
+                    gridRowContainer ? gridRowContainer.scrollWidth : 0
+                );
 
-                // Mostra la barra solo se serve davvero
-                if (gridContainer.scrollWidth > gridContainer.clientWidth) {
+                topScrollbarInner.style.width = realWidth + 'px';
+
+                if (realWidth > gridContainer.clientWidth) {
                     topScrollbar.style.display = 'block';
                 } else {
                     topScrollbar.style.display = 'none';
                 }
+
+                topScrollbar.scrollLeft = gridContainer.scrollLeft;
             }
 
             topScrollbar.addEventListener('scroll', function() {
@@ -1441,14 +1452,24 @@ $gridMeta = [
                 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);
+            // Recalculate after JS grid rendering
+            setTimeout(updateTopScrollbarWidth, 100);
+            setTimeout(updateTopScrollbarWidth, 300);
+            setTimeout(updateTopScrollbarWidth, 700);
+            setTimeout(updateTopScrollbarWidth, 1500);
+
+            // Recalculate automatically when rows/header/top controls are rendered or changed
+            const observer = new MutationObserver(updateTopScrollbarWidth);
+
+            if (gridContainer) {
+                observer.observe(gridContainer, {
+                    childList: true,
+                    subtree: true,
+                    attributes: true
+                });
+            }
         });
     </script>