[WC-3279] Datagrid 2: Enforce filter-aware minimum width during column resize

packages/modules/data-widgets/src/themesource/datawidgets/web/_datagrid.scss

@@ -591,6 +591,29 @@ $root: ".widget-datagrid";
 
 .grid-mock-header {
     display: contents;
+
+    span {
+        visibility: hidden;
+        height: 0;
+        display: block;
+        overflow: hidden;
+    }
+}
+
+// Filter-aware min-content sizing for MockHeader cells.
+// The data-filter attribute is set by React based on the column's filter type.
+// The ::after pseudo-element establishes an invisible minimum intrinsic width
+// that CSS Grid's minmax(auto, 1fr) respects as a floor.
+.grid-mock-header > [data-filter]::after {
+    content: "";
+    display: block;
+    visibility: hidden;
+    height: 0;
+    width: 100px;
+}
+
+.grid-mock-header > [data-filter="date"]::after {
+    width: 175px;
 }
 
 :where(#{$root}-paging-bottom, #{$root}-padding-top) {

packages/pluggableWidgets/datagrid-web/CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Fixed
+
+- We fixed an issue where columns could be resized narrower than their header filter widget required, making filters unusable.
+
 ## [3.8.1] - 2026-02-19
 
 ### Fixed

packages/pluggableWidgets/datagrid-web/src/components/MockHeader.tsx

@@ -38,16 +38,22 @@ export function MockHeader(): ReactNode {
     return (
         <div className={"grid-mock-header"} aria-hidden>
             {config.checkboxColumnEnabled && <div data-column-id="checkboxes" key={"checkboxes"}></div>}
-            {columnsStore.visibleColumns.map(c => (
-                <div
-                    data-column-id={c.columnId}
-                    key={c.columnId}
-                    // we set header ref here instead of the real header
-                    // as this mock header is aligned with CSS grid, so it is more reliable
-                    // the real header is aligned programmatically based on this header
-                    ref={ref => c.setHeaderElementRef(ref)}
-                ></div>
-            ))}
+            {columnsStore.visibleColumns.map(c => {
+                const filterType = columnsStore.columnFilters[c.columnIndex]?.filterType;
+                return (
+                    <div
+                        data-column-id={c.columnId}
+                        key={c.columnId}
+                        // we set header ref here instead of the real header
+                        // as this mock header is aligned with CSS grid, so it is more reliable
+                        // the real header is aligned programmatically based on this header
+                        ref={ref => c.setHeaderElementRef(ref)}
+                        data-filter={filterType}
+                    >
+                        <span>{c.header}</span>
+                    </div>
+                );
+            })}
             {config.selectorColumnEnabled && <div data-column-id="selector" key={"selector"}></div>}
         </div>
     );

packages/pluggableWidgets/datagrid-web/src/helpers/state/column/ColumnFilterStore.tsx

@@ -27,8 +27,10 @@ export class ColumnFilterStore implements IColumnFilterStore {
     private _filterStore: FilterStore | null = null;
     private _context: FilterAPI;
     private _filterHost: ObservableFilterHost;
+    readonly filterType: string | undefined;
 
     constructor(props: ColumnsType, info: StaticInfo, filterHost: ObservableFilterHost) {
+        this.filterType = ColumnFilterStore.resolveFilterType(props);
         this._filterHost = filterHost;
         this._widget = props.filter;
         const storeResult = this.createFilterStore(props, null);
@@ -104,6 +106,27 @@ export class ColumnFilterStore implements IColumnFilterStore {
             this._filterStore?.fromJSON(data);
         }
     }
+
+    private static resolveFilterType(props: ColumnsType): string | undefined {
+        if (!props.filter) {
+            return undefined;
+        }
+        switch (props.attribute?.type) {
+            case "DateTime":
+                return "date";
+            case "Integer":
+            case "Long":
+            case "Decimal":
+            case "AutoNumber":
+                return "number";
+            case "Enum":
+            case "EnumSet":
+            case "Boolean":
+                return "enum";
+            default:
+                return "text";
+        }
+    }
 }
 
 const isListAttributeValue = (