fix: horizontal scroll using trackpad gesture and grouped search filters

frappe_enhanced_gridview/public/js/enhanced_gridview.bundle.js

@@ -54,7 +54,6 @@ class Custom_Grid extends Grid {
 							</div>
 						</div>
 					</div>
-					<input type="range" min="1" max="100" value="1" class="enhanced-slider">
 				</div>
 				<div class="small form-clickable-section grid-footer">
 					<div class="flex justify-between">
@@ -103,18 +102,8 @@ class Custom_Grid extends Grid {
 		// enhance slider changes
 		this.form_grid.addClass("relative-important");
 		this.form_grid_container = this.wrapper.find(".form-grid-container");
-		this.enhanced_slider = this.wrapper.find(".enhanced-slider");
-		let me = this
-		this.enhanced_slider.on("input", function (event) {
-			const value = event.target.value;
-			me.form_grid.css("left", `-${value}px`)
-			me.setup_scrollable_width()
-		})
-
-
-
-
 
+
 		this.setup_add_row();
 
 		this.setup_grid_pagination();
@@ -289,28 +278,10 @@ class Custom_Grid extends Grid {
 			passes++;
 		}
 
-		// set width of scrollable area
-		this.setup_scrollable_width()
 		this.verify_overflow_columns_width()
 	}
 
 
-	setup_scrollable_width() {
-		let width = 200
-		this.visible_columns.forEach(column => {
-			width += column[1] * 50 + 100
-		});
-		if (width > this.form_grid_container[0].clientWidth) {
-			this.enhanced_slider.prop("max", width - this.form_grid_container[0].clientWidth)
-			this.enhanced_slider.prop("style", "display:block")
-		} else {
-			this.form_grid.css("left", `0px`)
-			this.enhanced_slider.prop("max", this.form_grid_container[0].clientWidth)
-			this.enhanced_slider.prop("style", "display:none")
-			this.enhanced_slider.prop("value", 0)
-		}
-	}
-
 	verify_overflow_columns_width() {
 		let width = 200
 		this.visible_columns.forEach(column => {
@@ -319,10 +290,6 @@ class Custom_Grid extends Grid {
 
 		if (width > this.form_grid_container[0].clientWidth) {
 			this.form_grid_container.addClass('enhanced-grid-container')
-			this.enhanced_slider.prop("style", "display:block")
-		} else {
-			this.enhanced_slider.prop("style", "display:none")
-			this.enhanced_slider.prop("value", 0)
 		}
 	}
 

frappe_enhanced_gridview/public/js/grid_row.js

@@ -812,7 +812,7 @@ export default class GridRow {
 		}
 
 		let $col = $(
-			'<div class="col grid-static-col col-xs-' + colsize + ' search"></div>'
+			'<div class="col grid-static-col col-xs- custom-' + colsize + ' search"></div>'
 		).appendTo(this.row);
 
 		let $search_input = $(`

frappe_enhanced_gridview/public/scss/enhanced_gridview.bundle.scss

@@ -2,14 +2,16 @@
     // overflow-y: auto;
     border: 1px solid var(--table-border-color);
     border-radius: var(--border-radius-md);
-    overflow-x: clip !important;
-
+    overflow-y: hidden;
+    overflow-x: unset !important;
+
     .form-grid {
         border: none;
         border-radius: unset;
     }
 
     .form-grid.relative-important {
+        overflow-x: auto;
         position: relative !important;
     }
 
@@ -22,13 +24,54 @@
         }
     }
 
-    .grid-heading-row .grid-static-col,
-    .grid-heading-row .row-check,
-    .grid-heading-row .row-index {
-        height: auto !important;
-        background-color: var(--subtle-fg);
+
+    /* Match native Frappe exactly */
+    /* Copied from frappe/public/common/grid.scss */
+    .grid-heading-row {
+        border-bottom: 1px solid var(--table-border-color);
+        color: var(--gray-600);
+        background-color: transparent;
+        height: 32px;
+        padding: 0 !important;
+        border-top-left-radius: var(--border-radius-md);
+        border-top-right-radius: var(--border-radius-md);
+
+        &.with-filter {
+            height: 64px;
+        }
+        .grid-row{
+            background-color: var(--subtle-fg);
+            min-width: max-content;  
+        }
+        .filter-row {
+            background-color: var(--bg-color);
+
+            .search {
+                // TODO: Align with table grid without overwriting padding if possible
+                padding: 4px 7px 4px 7px !important;
+                border-bottom: 1px solid var(--table-border-color);
+            }
+        }
+
+        .grid-static-col,
+        .row-check,
+        .row-index {
+            height: 32px;
+            padding: 6px 8px !important;
+        }
+        .grid-static-col {
+            padding: 6px 8px !important;
+            .static-area {
+                &.reqd:after {
+                    content: " *";
+                    color: var(--red-400);
+                }
+            }
+        }
     }
 
+
+
     .grid-row {
         .data-row.row {
             flex-wrap: nowrap;
@@ -94,42 +137,6 @@
                 min-width: 50px !important;
             }
 
-
         }
     }
-
-    .slidecontainer {
-        width: 100%;
-    }
-
-    .enhanced-slider {
-        -webkit-appearance: none;
-        width: 100%;
-        height: 8px;
-        background: #d3d3d3;
-        outline: none;
-        opacity: 0.7;
-        -webkit-transition: .2s;
-        transition: opacity .2s;
-    }
-
-    .enhanced-slider:hover {
-        opacity: 1;
-    }
-
-    .enhanced-slider::-webkit-slider-thumb {
-        -webkit-appearance: none;
-        appearance: none;
-        width: 30%;
-        height: 5px;
-        background-color: grey;
-        cursor: pointer;
-    }
-
-    .enhanced-slider::-moz-range-thumb {
-        width: 30%;
-        height: 5px;
-        background-color: grey;
-        cursor: pointer;
-    }
 }