Merge #153546

153546: asimview: fix scrolling with sha_compare.html r=tbg a=wenyihu6

Epic: none 
Release note: none 

----

Previously, scrolling didn't work with sha_compare.html in non-full-page mode
when zoomed in. This commit fixes it.

🤖 Generated with Claude Code
Co-Authored-By: Claude [[email protected]](mailto:[email protected])

Co-authored-by: wenyihu6 <[email protected]>

Author: craig[bot]

pkg/kv/kvserver/asim/tests/cmd/asimview/sha_compare.html

@@ -22,7 +22,20 @@
         .status.success { background: #d4edda; color: #155724; }
         .comparison-controls { background: white; padding: 20px; border-radius: 8px; margin-bottom: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
         .file-selector { display: flex; gap: 20px; align-items: center; }
-        .file-list { flex: 1; max-height: 400px; overflow-y: auto; border: 1px solid #ddd; border-radius: 4px; }
+        .file-list {
+            flex: 1;
+            max-height: 400px;
+            overflow-y: auto;
+            overflow-x: hidden;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            -webkit-overflow-scrolling: touch;
+            scroll-behavior: smooth;
+            outline: none;
+            /* Custom scrollbar styling */
+            scrollbar-width: thin;
+            scrollbar-color: #ccc #f5f5f5;
+        }
         .file-item { padding: 8px 12px; cursor: pointer; border-bottom: 1px solid #eee; }
         .file-item:hover { background: #f8f9fa; }
         .file-item.selected { 
@@ -435,11 +448,11 @@ <h3 id="sha2-title">SHA 2</h3>
 
             updateFileList() {
                 const fileList = document.getElementById('file-list');
-                
+
                 fileList.innerHTML = this.fileComparisons.map(file => {
                     let backgroundColor = '#51cf66'; // Default: identical (green)
                     let borderColor = '#51cf66';
-                    
+
                     if (file.hasDiff) {
                         if (file.onlyInSha1) {
                             backgroundColor = '#ffd43b'; // Only in SHA1 (yellow)
@@ -452,14 +465,45 @@ <h3 id="sha2-title">SHA 2</h3>
                             borderColor = '#ff6b6b';
                         }
                     }
-                    
+
                     return `
                         <div class="file-item" onclick="viewer.selectFile('${file.path}')" data-path="${file.path}"
                              style="border-left: 4px solid ${borderColor}; background: linear-gradient(90deg, ${backgroundColor}20 0%, white 15%);">
                             ${file.name}
                         </div>
                     `;
                 }).join('');
+
+                // Add mouse wheel scrolling support
+                this.setupFileListScrolling();
+            }
+
+            setupFileListScrolling() {
+                const fileList = document.getElementById('file-list');
+                if (!fileList) return;
+
+                // Remove existing listeners to prevent duplicates
+                fileList.removeEventListener('wheel', this.handleFileListScroll);
+
+                // Add wheel event listener for custom scrolling
+                this.handleFileListScroll = (e) => {
+                    // Prevent default page scrolling
+                    e.preventDefault();
+                    e.stopPropagation();
+
+                    // Calculate scroll amount with smoother, less laggy scrolling
+                    const scrollAmount = e.deltaY * 1.5;
+
+                    // Use requestAnimationFrame for smoother scrolling
+                    requestAnimationFrame(() => {
+                        fileList.scrollTop += scrollAmount;
+                    });
+                };
+
+                fileList.addEventListener('wheel', this.handleFileListScroll, { passive: false });
+
+                // Also ensure the element is focusable for better interaction
+                fileList.setAttribute('tabindex', '0');
             }
 
             async selectFile(filePath) {