From a3bf8624fb7bab843b544c3c4486f76304d0a49b Mon Sep 17 00:00:00 2001
From: DiTus <ditus@o2.pl>
Date: Sun, 22 Mar 2026 20:31:59 +0100
Subject: [PATCH] fix: improve chart resizer for mobile with touch support,
 save chart height, disable sidebar scrollbar

---
 index.html | 50 +++++++++++++++++++++++++++++++++-----------------
 1 file changed, 33 insertions(+), 17 deletions(-)

diff --git a/index.html b/index.html
index a0a4c7f..9ce3490 100644
--- a/index.html
+++ b/index.html
@@ -324,8 +324,8 @@
             </section>
 
             <!-- Draggable Divider -->
-            <div id="mainChartResizer" class="h-1.5 bg-[#1e293b] hover:bg-blue-500 cursor-row-resize shrink-0 transition-colors z-20 flex items-center justify-center group relative">
-                <div class="w-10 h-0.5 bg-gray-500 rounded opacity-0 group-hover:opacity-100 transition-opacity"></div>
+            <div id="mainChartResizer" class="h-4 bg-[#1e293b] hover:bg-blue-500 cursor-row-resize shrink-0 transition-colors z-20 flex items-center justify-center group relative">
+                <div class="w-10 h-0.5 bg-gray-500 rounded opacity-50 transition-all"></div>
             </div>
 
             <!-- Technical Analysis Section -->
@@ -428,7 +428,7 @@
             <span class="material-symbols-outlined text-sm">menu</span>
         </button>
 
-        <div class="flex-1 overflow-y-auto p-0 sidebar-content bg-[#0d1421]">
+        <div class="flex-1 overflow-y-auto p-0 sidebar-content bg-[#0d1421] no-scrollbar">
              <div class="sidebar-tab-panel active h-full" id="tab-indicators">
                  <div id="indicatorPanel" class="p-2">
                      <!-- Indicators content injected here -->
@@ -510,29 +510,33 @@
             
             let isResizing = false;
             let lastDownY = 0;
+            let savedHeight = localStorage.getItem('chart_height');
 
             if (resizer && chartWrapper) {
-                resizer.addEventListener('mousedown', (e) => {
-                    isResizing = true;
-                    lastDownY = e.clientY;
-                    document.body.style.cursor = 'row-resize';
-                    chartWrapper.style.pointerEvents = 'none'; // Prevent iframe/canvas capturing mouse
-                });
+                if (savedHeight) {
+                    chartWrapper.style.flex = 'none';
+                    chartWrapper.style.height = savedHeight + 'px';
+                }
 
-                document.addEventListener('mousemove', (e) => {
+                const startResize = (y) => {
+                    isResizing = true;
+                    lastDownY = y;
+                    document.body.style.cursor = 'row-resize';
+                    chartWrapper.style.pointerEvents = 'none';
+                };
+
+                const doResize = (y) => {
                     if (!isResizing) return;
                     
-                    const deltaY = e.clientY - lastDownY;
-                    lastDownY = e.clientY;
+                    const deltaY = y - lastDownY;
+                    lastDownY = y;
                     
                     const newHeight = chartWrapper.offsetHeight + deltaY;
                     
-                    // Min 200px, Max windowHeight - 150px
                     if (newHeight > 200 && newHeight < window.innerHeight - 150) {
                         chartWrapper.style.flex = 'none';
                         chartWrapper.style.height = newHeight + 'px';
                         
-                        // Force chart layout recalculation if applicable
                         if (window.dashboard && window.dashboard.chart) {
                             const container = document.getElementById('chart');
                             window.dashboard.chart.applyOptions({
@@ -541,15 +545,27 @@
                             });
                         }
                     }
-                });
+                };
 
-                document.addEventListener('mouseup', () => {
+                const endResize = () => {
                     if (isResizing) {
                         isResizing = false;
                         document.body.style.cursor = '';
                         chartWrapper.style.pointerEvents = 'auto';
+                        const currentHeight = chartWrapper.style.height;
+                        localStorage.setItem('chart_height', currentHeight ? parseFloat(currentHeight) : 75);
                     }
-                });
+                };
+
+                resizer.addEventListener('mousedown', (e) => startResize(e.clientY));
+                resizer.addEventListener('touchstart', (e) => startResize(e.touches[0].clientY), {passive: false});
+
+                document.addEventListener('mousemove', (e) => doResize(e.clientY));
+                document.addEventListener('touchmove', (e) => doResize(e.touches[0].clientY), {passive: false});
+
+                document.addEventListener('mouseup', endResize);
+                document.addEventListener('touchend', endResize);
+                document.addEventListener('touchcancel', endResize);
             }
         });
     </script>