fix(core): text color of search input, style for the multi-select tag, date-picker autofocus issue (#4799)

packages/frontend/component/src/components/page-list/filter/condition.tsx

@@ -47,7 +47,12 @@ export const Condition = ({
       const args = renderArgs(value, onChange, data.type);
       return (
         <div
-          style={{ display: 'flex', userSelect: 'none', alignItems: 'center' }}
+          style={{
+            display: 'flex',
+            userSelect: 'none',
+            alignItems: 'center',
+            overflow: 'hidden',
+          }}
         >
           <Menu
             items={
@@ -135,7 +140,10 @@ export const Arg = ({
     return null;
   }
   return (
-    <div data-testid="filter-arg" style={{ marginLeft: 4, fontWeight: 600 }}>
+    <div
+      data-testid="filter-arg"
+      style={{ marginLeft: 4, fontWeight: 600, overflow: 'hidden' }}
+    >
       {data.render({
         type,
         value: value?.value,

packages/frontend/component/src/components/page-list/filter/index.css.ts

@@ -27,6 +27,7 @@ export const filterItemStyle = style({
   borderRadius: '8px',
   background: 'var(--affine-white)',
   padding: '4px 8px',
+  overflow: 'hidden',
 });
 
 export const filterItemCloseStyle = style({
@@ -58,6 +59,7 @@ export const switchStyle = style({
     background: 'var(--affine-hover-color)',
     borderRadius: '4px',
   },
+  whiteSpace: 'nowrap',
 });
 export const filterTypeStyle = style({
   fontSize: 'var(--affine-font-sm)',

packages/frontend/component/src/components/page-list/filter/multi-select.css.ts

@@ -6,6 +6,7 @@ export const content = style({
   borderRadius: 8,
   padding: '3px 4px',
   cursor: 'pointer',
+  overflow: 'hidden',
   ':hover': {
     backgroundColor: 'var(--affine-hover-color)',
   },

packages/frontend/component/src/components/page-list/view/edit-collection.tsx

@@ -232,6 +232,12 @@ const RulesMode = ({
   const count = allowListPages.length + rulesPages.length;
   return (
     <>
+      {/*prevents modal autofocus to the first input*/}
+      <input
+        type="text"
+        style={{ width: 0, height: 0 }}
+        onFocus={e => requestAnimationFrame(() => e.target.blur())}
+      />
       <div className={clsx(styles.rulesTitle, styles.ellipsis)}>
         <Trans
           i18nKey="com.affine.editCollection.rules.tips"
@@ -532,6 +538,9 @@ const PagesMode = ({
         value={searchText}
         onChange={e => updateSearchText(e.target.value)}
         className={styles.rulesTitle}
+        style={{
+          color: 'var(--affine-text-primary-color)',
+        }}
         placeholder={t['com.affine.editCollection.search.placeholder']()}
       ></input>
       <div className={styles.pagesList}>