feat: Implement sidebar resizer functionality for improved UI interaction

Author: Ashjha75

index.js

@@ -1479,6 +1479,42 @@
     // ============================================================================
     // EVENTS
     // ============================================================================
+    const initSidebarResizer = () => {
+        const handle = D.resizer;
+        const panel = D.side;
+        if (!handle || !panel) return;
+
+        const minWidth = panel.getBoundingClientRect().width;
+        const safeMax = Math.max(minWidth, window.innerWidth - 320);
+        let startX = 0;
+        let startWidth = panel.offsetWidth;
+
+        const onMove = e => {
+            const delta = e.clientX - startX;
+            let targetWidth = startWidth + delta;
+            if (targetWidth < minWidth) targetWidth = minWidth;
+            if (targetWidth > safeMax) targetWidth = safeMax;
+            panel.style.width = `${targetWidth}px`;
+        };
+
+        const stopDrag = () => {
+            document.removeEventListener('mousemove', onMove);
+            document.removeEventListener('mouseup', stopDrag);
+            document.body.style.cursor = '';
+            handle.classList.remove('active');
+        };
+
+        handle.addEventListener('mousedown', e => {
+            e.preventDefault();
+            startX = e.clientX;
+            startWidth = panel.offsetWidth;
+            document.body.style.cursor = 'ew-resize';
+            handle.classList.add('active');
+            document.addEventListener('mousemove', onMove);
+            document.addEventListener('mouseup', stopDrag);
+        });
+    };
+
     const setup = () => {
         console.log('Setting up event handlers...');
         if (D.tog) D.tog.addEventListener('click', () => D.side && D.side.classList.toggle('collapsed'));
@@ -1569,6 +1605,7 @@
         if (D.gen) D.gen.addEventListener('click', gen);
         if (D.copy) D.copy.addEventListener('click', copyClip);
         if (D.txt) D.txt.addEventListener('click', () => dl('txt'));
+        initSidebarResizer();
         // Clear All button
         const clearBtn = $('clearAll');
         if (clearBtn) {

style.css

@@ -18,7 +18,6 @@
 .sidebar-btn-icon {
     width: 20px;
     height: 20px;
-    vertical-align: middle;
     margin-right: 8px;
     margin-bottom: 2px;
     filter: brightness(0) saturate(100%) invert(0);
@@ -36,7 +35,6 @@
 .context-btn-icon {
     width: 22px;
     height: 22px;
-    vertical-align: middle;
     margin-right: 8px;
     margin-bottom: 2px;
 }