From 86a848d92775beec4e88e441c477822cf1b3df4d Mon Sep 17 00:00:00 2001
From: Chaim Lev-Ari <chaim.levi-ari@portainer.io>
Date: Sun, 30 Jul 2023 13:03:08 +0200
Subject: [PATCH] feat(ui/datatables): fix filter style

---
 app/react/components/datatables/Filter.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/react/components/datatables/Filter.tsx b/app/react/components/datatables/Filter.tsx
index 371eb86bf..7a763b047 100644
--- a/app/react/components/datatables/Filter.tsx
+++ b/app/react/components/datatables/Filter.tsx
@@ -11,7 +11,7 @@ import { Icon } from '@@/Icon';
 import { DefaultType } from './types';
 
 interface MultipleSelectionFilterProps {
-  options: string[];
+  options: Array<string> | ReadonlyArray<string>;
   value: string[];
   filterKey: string;
   onChange: (value: string[]) => void;
@@ -30,12 +30,12 @@ export function MultipleSelectionFilter({
     <div>
       <Menu>
         <MenuButton
-          className={clsx('table-filter', { 'filter-active': enabled })}
+          className={clsx('table-filter flex items-center gap-1', {
+            'filter-active': enabled,
+          })}
         >
-          <div className="flex items-center gap-1">
-            Filter
-            <Icon icon={enabled ? Check : Filter} />
-          </div>
+          Filter
+          <Icon icon={enabled ? Check : Filter} />
         </MenuButton>
         <MenuPopover className="dropdown-menu">
           <div className="tableMenu">