From 7af98328f565ffd9521ae92afefd93596282abfc Mon Sep 17 00:00:00 2001
From: chanx <1243304602@qq.com>
Date: Thu, 15 Jan 2026 10:53:18 +0800
Subject: [PATCH] Fix: the styles of the multi-select component and the filter
 pop-up. (#12628)

### What problem does this PR solve?

Fix: Fix the styles of the multi-select component and the filter pop-up.

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)
---
 .../list-filter-bar/filter-popover.tsx        | 32 ++++++++++---------
 web/src/components/ui/multi-select.tsx        |  5 +--
 2 files changed, 20 insertions(+), 17 deletions(-)

diff --git a/web/src/components/list-filter-bar/filter-popover.tsx b/web/src/components/list-filter-bar/filter-popover.tsx
index 45657a81d..500be93bd 100644
--- a/web/src/components/list-filter-bar/filter-popover.tsx
+++ b/web/src/components/list-filter-bar/filter-popover.tsx
@@ -194,7 +194,7 @@ function CheckboxFormMultiple({
     <Form {...form}>
       <form
         onSubmit={form.handleSubmit(onSubmit)}
-        className="space-y-8 px-5 py-2.5"
+        className="space-y-8 px-5 py-2.5 max-h-[80vh] overflow-auto"
         onReset={() => form.reset()}
       >
         <div className="space-y-4">
@@ -265,20 +265,22 @@ function CheckboxFormMultiple({
                       )}
                     </div>
                   </div>
-                  {!!filteredItem.list?.length &&
-                    filteredItem.list.map((item) => {
-                      return (
-                        <FilterField
-                          key={item.id}
-                          item={{ ...item }}
-                          parent={{
-                            ...x,
-                            id: x.field,
-                            // field: `${x.field}${item.field ? '.' + item.field : ''}`,
-                          }}
-                        />
-                      );
-                    })}
+                  <div className="space-y-4 max-h-[300px] overflow-auto scrollbar-thin">
+                    {!!filteredItem.list?.length &&
+                      filteredItem.list.map((item) => {
+                        return (
+                          <FilterField
+                            key={item.id}
+                            item={{ ...item }}
+                            parent={{
+                              ...x,
+                              id: x.field,
+                              // field: `${x.field}${item.field ? '.' + item.field : ''}`,
+                            }}
+                          />
+                        );
+                      })}
+                  </div>
                   <FormMessage />
                 </FormItem>
               );
diff --git a/web/src/components/ui/multi-select.tsx b/web/src/components/ui/multi-select.tsx
index bf9e2374b..42bb1843e 100644
--- a/web/src/components/ui/multi-select.tsx
+++ b/web/src/components/ui/multi-select.tsx
@@ -124,7 +124,8 @@ const multiSelectVariants = cva(
  * Props for MultiSelect component
  */
 interface MultiSelectProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+  extends
+    React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof multiSelectVariants> {
   /**
    * An array of option objects to be displayed in the multi-select component.
@@ -289,7 +290,7 @@ export const MultiSelect = React.forwardRef<
             {...props}
             onClick={handleTogglePopover}
             className={cn(
-              'flex w-full p-1 rounded-md border border-border-button min-h-10 h-auto placeholder:text-text-disabled items-center justify-between bg-bg-input hover:bg-bg-input [&_svg]:pointer-events-auto',
+              'flex w-full p-1 rounded-md border border-border-button min-h-10 h-auto placeholder:text-text-disabled items-center justify-between bg-bg-input focus-visible:bg-bg-input hover:bg-bg-input [&_svg]:pointer-events-auto',
               className,
             )}
           >