style: add text overflow style for collections (#3292)

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

apps/core/src/components/blocksuite/workspace-header/header.tsx

@@ -200,7 +200,7 @@ export const Header = forwardRef<
         data-testid="editor-header-items"
         data-is-edgeless={mode === 'edgeless'}
       >
-        <div style={{ display: 'flex', alignItems: 'center' }}>
+        <div className={styles.headerLeftSide}>
           {!open && <SidebarSwitch />}
           {props.leftSlot}
         </div>

apps/core/src/components/blocksuite/workspace-header/styles.css.ts

@@ -83,13 +83,23 @@ export const titleWrapper = style({
   justifyContent: 'center',
   alignItems: 'center',
 });
-
+export const headerLeftSide = style({
+  display: 'flex',
+  alignItems: 'center',
+  width: '150px',
+  '@media': {
+    '(max-width: 900px)': {
+      width: 'auto',
+    },
+  },
+});
 export const headerRightSide = style({
   height: '100%',
   display: 'flex',
   alignItems: 'center',
   gap: '12px',
   zIndex: 1,
+  justifyContent: 'flex-end',
 });
 
 export const browserWarning = style({
@@ -153,7 +163,6 @@ export const allPageListTitleWrapper = style({
   fontSize: 'var(--affine-font-base)',
   color: 'var(--affine-text-primary-color)',
   display: 'flex',
-  justifyContent: 'center',
   alignItems: 'center',
   '::after': {
     content: '""',

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

@@ -1,3 +1,4 @@
+import { Tooltip } from '@affine/component';
 import { EditCollectionModel } from '@affine/component/page-list';
 import type { PropertiesMeta } from '@affine/env/filter';
 import type { GetPageInfoById } from '@affine/env/page-info';
@@ -102,9 +103,21 @@ export const CollectionBar = ({
               width: 20,
             }}
           />
-          <div style={{ marginRight: 10 }}>
+          <Tooltip
-            {setting.currentCollection.name}
+            content={setting.currentCollection.name}
-          </div>
+            pointerEnterDelay={1500}
+          >
+            <div
+              style={{
+                marginRight: 10,
+                maxWidth: 200,
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+              }}
+            >
+              {setting.currentCollection.name}
+            </div>
+          </Tooltip>
           {actions.map(action => {
             return (
               <div

packages/component/src/components/page-list/view/collection-list.css.ts

@@ -1,4 +1,4 @@
-import { style } from '@vanilla-extract/css';
+import { globalStyle, style } from '@vanilla-extract/css';
 
 export const menuTitleStyle = style({
   marginLeft: '12px',
@@ -20,6 +20,8 @@ export const viewButton = style({
   padding: '4px 8px',
   fontSize: 'var(--affine-font-xs)',
   background: 'var(--affine-white)',
+  maxWidth: '200px',
+  overflow: 'hidden',
   color: 'var(--affine-text-secondary-color)',
   border: '1px solid var(--affine-border-color)',
   transition: 'margin-left 0.2s ease-in-out',
@@ -28,6 +30,20 @@ export const viewButton = style({
     background: 'var(--affine-hover-color)',
   },
   marginRight: '20px',
+  '@media': {
+    '(max-width: 1200px)': {
+      maxWidth: '100px',
+    },
+    '(max-width: 900px)': {
+      maxWidth: '150px',
+      marginRight: '10px',
+    },
+  },
+});
+globalStyle(`${viewButton} > span`, {
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
 });
 export const viewMenu = style({});
 export const viewOption = style({

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

@@ -16,7 +16,7 @@ import { useAtom } from 'jotai';
 import type { MouseEvent, ReactNode } from 'react';
 import { useCallback, useMemo, useState } from 'react';
 
-import { Button, MenuItem } from '../../..';
+import { Button, MenuItem, Tooltip } from '../../..';
 import Menu from '../../../ui/menu/menu';
 import { appSidebarOpenAtom } from '../../app-sidebar';
 import { CreateFilterMenu } from '../filter/vars';
@@ -80,39 +80,53 @@ const CollectionOption = ({
       key={collection.id}
       className={styles.viewMenu}
     >
-      <div
+      <Tooltip
-        style={{
+        content={collection.name}
-          display: 'flex',
+        placement="right"
-          alignItems: 'center',
+        pointerEnterDelay={1500}
-          justifyContent: 'space-between',
-        }}
       >
-        <div>{collection.name}</div>
         <div
           style={{
             display: 'flex',
             alignItems: 'center',
+            justifyContent: 'space-between',
           }}
         >
-          {actions.map((v, i) => {
+          <div
-            const onClick = (e: MouseEvent<HTMLDivElement>) => {
+            style={{
-              e.stopPropagation();
+              maxWidth: '150px',
-              v.click();
+              overflow: 'hidden',
-            };
+              textOverflow: 'ellipsis',
-            return (
+            }}
-              <div
+          >
-                data-testid={`collection-select-option-${v.name}`}
+            {collection.name}
-                key={i}
+          </div>
-                onClick={onClick}
+          <div
-                style={{ marginLeft: i === 0 ? 28 : undefined }}
+            style={{
-                className={clsx(styles.viewOption, v.className)}
+              display: 'flex',
-              >
+              alignItems: 'center',
-                {v.icon}
+            }}
-              </div>
+          >
-            );
+            {actions.map((v, i) => {
-          })}
+              const onClick = (e: MouseEvent<HTMLDivElement>) => {
+                e.stopPropagation();
+                v.click();
+              };
+              return (
+                <div
+                  data-testid={`collection-select-option-${v.name}`}
+                  key={i}
+                  onClick={onClick}
+                  style={{ marginLeft: i === 0 ? 28 : undefined }}
+                  className={clsx(styles.viewOption, v.className)}
+                >
+                  {v.icon}
+                </div>
+              );
+            })}
+          </div>
         </div>
-      </div>
+      </Tooltip>
     </MenuItem>
   );
 };
@@ -155,7 +169,6 @@ export const CollectionList = ({
         [styles.filterButtonCollapse]: !open,
       })}
       style={{
-        marginLeft: 4,
         display: 'flex',
         alignItems: 'center',
       }}
@@ -199,7 +212,12 @@ export const CollectionList = ({
             hoverColor="var(--affine-icon-color)"
             data-testid="collection-select"
           >
-            {setting.currentCollection.name}
+            <Tooltip
+              content={setting.currentCollection.name}
+              pointerEnterDelay={1500}
+            >
+              <>{setting.currentCollection.name}</>
+            </Tooltip>
           </Button>
         </Menu>
       )}

packages/component/src/ui/popper/popper.tsx

@@ -22,7 +22,7 @@ export const Popper = ({
   defaultVisible = false,
   visible: propsVisible,
   trigger = 'hover',
-  pointerEnterDelay = 100,
+  pointerEnterDelay = 500,
   pointerLeaveDelay = 100,
   onVisibleChange,
   popoverStyle,

packages/component/src/ui/tooltip/tooltip.tsx

@@ -15,6 +15,7 @@ const StyledTooltip = styled(StyledPopperContainer)(() => {
     fontSize: 'var(--affine-font-sm)',
     borderRadius: '8px',
     marginBottom: '12px',
+    overflowWrap: 'break-word',
   };
 });