feat: Add draggable chart resizer and fix flexible layout to prevent empty space

index.html

@@ -80,7 +80,7 @@
 
     <div class="flex flex-1 pt-16 overflow-hidden">
         <!-- Main Content -->
-        <main class="flex-1 overflow-y-auto pb-20 md:pb-0 no-scrollbar">
+        <main class="flex-1 flex flex-col overflow-y-auto pb-20 md:pb-0 no-scrollbar">
             <!-- Price Statistics -->
             <section id="priceHeader" class="grid grid-cols-2 md:grid-cols-4 gap-2 px-4 py-4 border-b border-[#1e293b] bg-[#0d1421]">
                 <div>
@@ -102,7 +102,7 @@
             </section>
 
            <!-- Chart Container -->
-            <section class="relative w-full bg-[#0d1421] h-[60vh] md:h-[70vh]" data-purpose="chart-container" id="chartWrapper">
+            <section class="relative w-full bg-[#0d1421] flex-1 min-h-[50vh]" data-purpose="chart-container" id="chartWrapper">
                  <div id="chart" class="w-full h-full"></div>
 
                  <!-- Horizontal Drawing Toolbar (Top) -->
@@ -323,8 +323,13 @@
                  </div>
             </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>
+
             <!-- Technical Analysis Section -->
-            <section class="px-4 py-6 bg-[#0d1421] min-h-[300px]" id="taPanel">
+            <section class="px-4 py-4 bg-[#0d1421] shrink-0" id="taPanel">
                 <div class="flex items-center justify-between mb-4">
                     <h2 class="text-lg font-bold flex items-center gap-2">
                         <span class="material-symbols-outlined text-[#b6c4ff]">analytics</span>
@@ -497,6 +502,56 @@
                 }
             }
         };
+
+        // Chart Resizer Logic
+        document.addEventListener('DOMContentLoaded', () => {
+            const resizer = document.getElementById('mainChartResizer');
+            const chartWrapper = document.getElementById('chartWrapper');
+            
+            let isResizing = false;
+            let lastDownY = 0;
+
+            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
+                });
+
+                document.addEventListener('mousemove', (e) => {
+                    if (!isResizing) return;
+                    
+                    const deltaY = e.clientY - lastDownY;
+                    lastDownY = e.clientY;
+                    
+                    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({
+                                width: container.clientWidth,
+                                height: container.clientHeight
+                            });
+                        }
+                    }
+                });
+
+                document.addEventListener('mouseup', () => {
+                    if (isResizing) {
+                        isResizing = false;
+                        document.body.style.cursor = '';
+                        chartWrapper.style.pointerEvents = 'auto';
+                    }
+                });
+            }
+        });
     </script>
 
     <script src="./config.js"></script>