chore: update filter style (#2617)

Co-authored-by: Himself65 <himself65@outlook.com>

apps/web/src/components/workspace-header.tsx

@@ -15,6 +15,7 @@ import type { ReactElement } from 'react';
 import { NIL } from 'uuid';
 
 import { BlockSuiteEditorHeader } from './blocksuite/workspace-header';
+import { filterContainerStyle } from './filter-container.css';
 import { WorkspaceModeFilterTab, WorkspaceTitle } from './pure/workspace-title';
 
 export function WorkspaceHeader({
@@ -25,23 +26,21 @@ export function WorkspaceHeader({
   const t = useAFFiNEI18N();
   if ('subPath' in currentEntry) {
     if (currentEntry.subPath === WorkspaceSubPath.ALL) {
-      const leftSlot = config.enableAllPageFilter && (
-        <ViewList setting={setting}></ViewList>
-      );
-      const filterContainer = config.enableAllPageFilter &&
-        setting.currentView.filterList.length > 0 && (
-          <div style={{ padding: 12, display: 'flex' }}>
-            <div style={{ flex: 1 }}>
-              <FilterList
-                value={setting.currentView.filterList}
-                onChange={filterList => {
-                  setting.setCurrentView(view => ({
-                    ...view,
-                    filterList,
-                  }));
-                }}
-              />
-            </div>
+      const leftSlot = <ViewList setting={setting}></ViewList>;
+      const filterContainer = setting.currentView.filterList.length > 0 && (
+        <div className={filterContainerStyle}>
+          <div style={{ flex: 1 }}>
+            <FilterList
+              value={setting.currentView.filterList}
+              onChange={filterList => {
+                setting.setCurrentView(view => ({
+                  ...view,
+                  filterList,
+                }));
+              }}
+            />
+          </div>
+          {config.enableAllPageFilter && (
             <div>
               {setting.currentView.id !== NIL ||
               (setting.currentView.id === NIL &&
@@ -56,8 +55,9 @@ export function WorkspaceHeader({
                 </Button>
               )}
             </div>
-          </div>
-        );
+          )}
+        </div>
+      );
       return (
         <>
           <WorkspaceModeFilterTab