feat(import_edit2): expand entire column including header and fix sticky columns

public/userarea/import_edit2.php

@@ -278,6 +278,7 @@ function fixedDefaultValue(array $f): string
         }
 
         /* Sticky columns - first column (Actions) */
+		.grid-top .grid-cell.save-all-cell,
 		.grid-header.button-header,
         .grid-cell.button-cell {
             position: sticky !important;
@@ -300,6 +301,7 @@ function fixedDefaultValue(array $f): string
             background-color: #e9ecef;
         }
 
+		.grid-top .grid-cell:nth-child(2),
         .grid-row .grid-header:nth-child(2),
         .grid-row .grid-cell:nth-child(2) {
             position: sticky !important;
@@ -326,7 +328,8 @@ function fixedDefaultValue(array $f): string
             position: relative;
         }
 
-        .grid-cell.expanded {
+        .grid-cell.expanded,
+        .grid-header.expanded {
             max-width: 500px !important;
             white-space: normal !important;
             overflow-wrap: break-word !important;
@@ -334,6 +337,10 @@ function fixedDefaultValue(array $f): string
             flex: 0 0 500px !important;
         }
         
+        .grid-header.expanded {
+            background-color: #e0f7fa !important;
+        }
+
         .resizer {
             width: 5px;
             height: 100%;
@@ -351,7 +358,7 @@ function fixedDefaultValue(array $f): string
 
         .grid-top {
             display: flex;
-            align-items: flex-start;
+            align-items: stretch;
             padding: 10px 0;
             min-height: 0;
             flex-wrap: nowrap;
@@ -1115,16 +1122,32 @@ function fixedDefaultValue(array $f): string
     <script src="tracking.js"></script>
     <script src="export_to_lims.js"></script>
     <script>
-        // Initialize Flatpickr for all date inputs
+        function expandColumn(cell, expand) {
+            const columnIndex = cell.getAttribute('data-index');
+            if (!columnIndex) return;
+            
+            const allColumnCells = document.querySelectorAll(`.grid-cell[data-index="${columnIndex}"], .grid-header[data-index="${columnIndex}"], .grid-top-cell[data-index="${columnIndex}"]`);
+            
+            allColumnCells.forEach(colCell => {
+                if (expand) {
+                    colCell.classList.add('expanded');
+                } else {
+                    colCell.classList.remove('expanded');
+                }
+            });
+        }
+
         document.addEventListener("DOMContentLoaded", function() {
             flatpickr(".date-picker", {
                 dateFormat: "Y-m-d",
                 allowInput: true,
                 onOpen: function(selectedDates, dateStr, instance) {
-                    instance.input.closest('.grid-cell').classList.add('expanded');
+                    const cell = instance.input.closest('.grid-cell');
+                    expandColumn(cell, true);
                 },
                 onClose: function(selectedDates, dateStr, instance) {
-                    instance.input.closest('.grid-cell').classList.remove('expanded');
+                    const cell = instance.input.closest('.grid-cell');
+                    expandColumn(cell, false);
                     // Trigger change event to handle unsaved changes
                     const event = new Event('change');
                     instance.input.dispatchEvent(event);
@@ -1493,10 +1516,12 @@ function fixedDefaultValue(array $f): string
                     input.type === 'number' ||
                     input.type === 'date') {
                     input.addEventListener('focus', function() {
-                        this.closest('.grid-cell').classList.add('expanded');
+                        const cell = this.closest('.grid-cell');
+                        expandColumn(cell, true);
                     });
                     input.addEventListener('blur', function() {
-                        this.closest('.grid-cell').classList.remove('expanded');
+                        const cell = this.closest('.grid-cell');
+                        expandColumn(cell, false);
                     });
                     return;
                 }
@@ -1505,7 +1530,7 @@ function fixedDefaultValue(array $f): string
                     input.addEventListener('focus', function() {
                         const cell = this.closest('.grid-cell');
 
-                        cell.classList.add('expanded');
+                        expandColumn(cell, true);
                         cell.dataset.convertingToTextarea = 'true';
                         
                         const textarea = document.createElement('textarea');
@@ -1531,7 +1556,8 @@ function fixedDefaultValue(array $f): string
                     });
                 } else {
                     input.addEventListener('focus', function() {
-                        this.closest('.grid-cell').classList.add('expanded');
+                        const cell = this.closest('.grid-cell');
+                        expandColumn(cell, true);
                     });
                 }
             });
@@ -1555,11 +1581,11 @@ function fixedDefaultValue(array $f): string
                     
                     element.parentNode.replaceChild(input, element);
                     
-                    cell.classList.remove('expanded');
+                    expandColumn(cell, false);
                     
                     input.addEventListener('focus', function() {
                         const cell = this.closest('.grid-cell');
-                        cell.classList.add('expanded');
+                        expandColumn(cell, true);
                         cell.dataset.convertingToTextarea = 'true';
                         
                         const textarea = document.createElement('textarea');
@@ -1587,7 +1613,7 @@ function fixedDefaultValue(array $f): string
                 } else if (element.tagName === 'INPUT' && element.type === 'text') {
                     const cell = element.closest('.grid-cell');
                     if (cell && !cell.dataset.convertingToTextarea) {
-                        cell.classList.remove('expanded');
+                        expandColumn(cell, false);
                     }
                 }
             }, true);
@@ -2240,6 +2266,22 @@ function fixedDefaultValue(array $f): string
                         row.style.minWidth = 'max-content';
                     }
                 });
+                
+                const gridTop = document.querySelector('.grid-top');
+                if (gridTop && !gridTop.style.minWidth) {
+                    gridTop.style.minWidth = 'max-content';
+                }
+                
+                const stickyTopCells = document.querySelectorAll('.grid-top .grid-cell.save-all-cell, .grid-top .grid-cell:nth-child(2)');
+                stickyTopCells.forEach(cell => {
+                    if (!cell.style.minWidth && !cell.style.flex) {
+                        
+                        const computedStyle = window.getComputedStyle(cell);
+                        if (computedStyle.flex === '0 0 auto' || !computedStyle.flex.includes('0 0')) {
+                            cell.style.minWidth = cell.offsetWidth + 'px';
+                        }
+                    }
+                });
             }
         });
     </script>