fix(storybook): page tags display (#4924)

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

@@ -64,14 +64,6 @@ export const innerBackdrop = style({
   },
 });
 
-const range = (start: number, end: number) => {
-  const result = [];
-  for (let i = start; i < end; i++) {
-    result.push(i);
-  }
-  return result;
-};
-
 export const tag = style({
   height: '20px',
   display: 'flex',
@@ -94,14 +86,6 @@ export const tagSticky = style([
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
     left: 0,
-    selectors: range(0, 20).reduce((selectors, i) => {
-      return {
-        ...selectors,
-        [`&:nth-last-child(${i + 1})`]: {
-          right: `${i * 48}px`,
-        },
-      };
-    }, {}),
   },
 ]);
 

packages/frontend/component/src/components/page-list/page-tags.tsx

@@ -18,6 +18,7 @@ interface TagItemProps {
   tag: Tag;
   idx: number;
   mode: 'sticky' | 'list-item';
+  style?: React.CSSProperties;
 }
 
 // hack: map var(--affine-tag-xxx) colors to var(--affine-palette-line-xxx)
@@ -37,13 +38,14 @@ const tagColorMap = (color: string) => {
   return mapping[color] || color;
 };
 
-const TagItem = ({ tag, idx, mode }: TagItemProps) => {
+const TagItem = ({ tag, idx, mode, style }: TagItemProps) => {
   return (
     <div
       data-testid="page-tag"
       className={mode === 'sticky' ? styles.tagSticky : styles.tagListItem}
       data-idx={idx}
       title={tag.value}
+      style={style}
     >
       <div
         className={styles.tagIndicator}
@@ -101,8 +103,30 @@ export const PageTags = ({
 
   const tagsNormal = useMemo(() => {
     const nTags = maxItems ? tags.slice(0, maxItems) : tags;
+
+    // sort tags by length
+    nTags.sort((a, b) => a.value.length - b.value.length);
+
+    const tagRightCharLength = nTags.reduceRight<number[]>(
+      (acc, tag) => {
+        const curr = acc[0] + Math.min(tag.value.length, 10);
+        return [curr, ...acc];
+      },
+      [0]
+    );
+
+    tagRightCharLength.shift();
+
     return nTags.map((tag, idx) => (
-      <TagItem key={tag.id} tag={tag} idx={idx} mode="sticky" />
+      <TagItem
+        key={tag.id}
+        tag={tag}
+        idx={idx}
+        mode="sticky"
+        style={{
+          right: `calc(${tagRightCharLength[idx]}em)`,
+        }}
+      />
     ));
   }, [maxItems, tags]);
   return (

tests/storybook/src/stories/page-list.stories.tsx

@@ -67,6 +67,31 @@ AffineNewPageButton.play = async ({ canvasElement }) => {
 };
 
 const testTags = [
+  {
+    color: 'red',
+    id: 'test-tag-id-cccc',
+    value: 'cccccccccccccccc',
+  },
+  {
+    color: 'red',
+    id: 'test-tag-id-a',
+    value: 'a',
+  },
+  {
+    color: 'red',
+    id: 'test-tag-id-b',
+    value: 'b',
+  },
+  {
+    color: 'red',
+    id: 'test-tag-id-c',
+    value: 'c',
+  },
+  {
+    color: 'red',
+    id: 'test-tag-id-d',
+    value: 'd',
+  },
   {
     color: 'red',
     id: 'test-tag-id-0',