fix: update breakpoint in all page (#2602)

packages/component/src/components/page-list/all-page.tsx

@@ -20,7 +20,7 @@ import { TrashOperationCell } from './operation-cell';
 import { StyledTableContainer, StyledTableRow } from './styles';
 import type { ListData, PageListProps, TrashListData } from './type';
 import { useSorter } from './use-sorter';
-import { formatDate } from './utils';
+import { formatDate, useIsSmallDevices } from './utils';
 
 const AllPagesHead = ({
   isPublicWorkspace,
@@ -121,8 +121,7 @@ export const PageList = ({
     order: 'desc',
   });
 
-  const theme = useTheme();
-  const isSmallDevices = useMediaQuery(theme.breakpoints.down('sm'));
+  const isSmallDevices = useIsSmallDevices();
   if (isSmallDevices) {
     return (
       <AllPageListMobileView
@@ -217,10 +216,8 @@ export const PageListTrashView: React.FC<{
             text={title || t['Untitled']()}
             onClick={onClickPage}
           />
-          <TableCell ellipsis={true} onClick={onClickPage}>
-            {formatDate(createDate)}
-          </TableCell>
-          <TableCell ellipsis={true} onClick={onClickPage}>
+          <TableCell onClick={onClickPage}>{formatDate(createDate)}</TableCell>
+          <TableCell onClick={onClickPage}>
             {trashDate ? formatDate(trashDate) : '--'}
           </TableCell>
           <TableCell

packages/component/src/components/page-list/all-pages-body.tsx

@@ -1,7 +1,6 @@
 import { styled, TableBody, TableCell } from '@affine/component';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { useDraggable } from '@dnd-kit/core';
-import { useMediaQuery, useTheme } from '@mui/material';
 import type { ReactNode } from 'react';
 import { Fragment } from 'react';
 
@@ -11,7 +10,7 @@ import { OperationCell } from './operation-cell';
 import { StyledTableRow } from './styles';
 import type { DateKey, DraggableTitleCellData, ListData } from './type';
 import { useDateGroup } from './use-date-group';
-import { formatDate } from './utils';
+import { formatDate, useIsSmallDevices } from './utils';
 
 export const GroupRow = ({ children }: { children: ReactNode }) => {
   return (
@@ -40,8 +39,7 @@ export const AllPagesBody = ({
   groupKey?: DateKey;
 }) => {
   const t = useAFFiNEI18N();
-  const theme = useTheme();
-  const isSmallDevices = useMediaQuery(theme.breakpoints.down('sm'));
+  const isSmallDevices = useIsSmallDevices();
   const dataWithGroup = useDateGroup({ data, key: groupKey });
   return (
     <TableBody>

packages/component/src/components/page-list/utils.tsx

@@ -1,3 +1,11 @@
+import { useMediaQuery, useTheme } from '@mui/material';
+
+export const useIsSmallDevices = () => {
+  const theme = useTheme();
+  const isSmallDevices = useMediaQuery(theme.breakpoints.down(900));
+  return isSmallDevices;
+};
+
 export function isToday(date: Date): boolean {
   const today = new Date();
   return (

packages/component/src/ui/table/styles.ts

@@ -39,7 +39,7 @@ export const StyledTableCell = styled('td')<
       boxSizing: 'border-box',
       textAlign: align,
       verticalAlign: 'middle',
-      overflowWrap: 'break-word',
+      whiteSpace: 'nowrap',
       userSelect: 'none',
       fontSize: 'var(--affine-font-sm)',
       ...(active ? { color: 'var(--affine-text-primary-color)' } : {}),