Optimize Grid header UI: reduce font sizes, padding, and improve alignment of metric columns

components/ExcelFilter.tsx

@@ -33,7 +33,8 @@ export const ExcelFilter: React.FC<ExcelFilterProps> = ({
     uniqueValues,
     currentFilter,
     onFilterChange,
-    icon
+    icon,
+    buttonClassName
 }) => {
     const [isOpen, setIsOpen] = useState(false);
     const [operator, setOperator] = useState<typeof OPERATORS[number]['value']>(currentFilter?.textFilter?.operator || '');
@@ -113,16 +114,16 @@ export const ExcelFilter: React.FC<ExcelFilterProps> = ({
     const hasActiveFilter = !!(currentFilter?.textFilter || currentFilter?.selectedValues);
 
     return (
-        <div className="relative inline-block ml-1" ref={containerRef}>
+        <div className="relative inline-block" ref={containerRef}>
             <button
                 onClick={(e) => {
                     e.stopPropagation();
                     setIsOpen(!isOpen);
                 }}
-                className={`flex flex-col items-center gap-0.5 p-1 rounded hover:bg-white/10 transition-all ${hasActiveFilter ? 'text-indigo-400 bg-indigo-500/10' : 'text-slate-500'}`}
+                className={buttonClassName || `flex items-center justify-center p-1 rounded hover:bg-white/10 transition-all ${hasActiveFilter ? 'text-indigo-400 bg-indigo-500/10' : 'text-slate-500'}`}
                 title={`Filter by ${title}`}
             >
-                {icon || <FunnelIcon className="w-3 h-3" />}
+                {icon || <FunnelIcon className={buttonClassName?.includes('w-') ? '' : "w-3 h-3"} />}
             </button>
 
             {isOpen && (