fix(core): can not scroll when backlink list is too long (#8370)

close AF-1431

packages/frontend/core/src/components/affine/page-properties/styles.css.ts

@@ -1,4 +1,5 @@
 import { cssVar } from '@toeverything/theme';
+import { cssVarV2 } from '@toeverything/theme/v2';
 import { createVar, globalStyle, style } from '@vanilla-extract/css';
 
 const propertyNameCellWidth = createVar();
@@ -50,7 +51,7 @@ export const tableHeaderInfoRow = style({
   flexDirection: 'row',
   justifyContent: 'space-between',
   alignItems: 'center',
-  color: cssVar('textSecondaryColor'),
+  color: cssVarV2('text/secondary'),
   fontSize: fontSize,
   fontWeight: 500,
   minHeight: 34,
@@ -86,7 +87,7 @@ export const tableHeaderCollapseButtonWrapper = style({
 });
 
 export const pageInfoDimmed = style({
-  color: cssVar('textSecondaryColor'),
+  color: cssVarV2('text/secondary'),
 });
 
 export const spacer = style({
@@ -98,7 +99,7 @@ export const tableHeaderBacklinksHint = style({
   cursor: 'pointer',
   borderRadius: '4px',
   ':hover': {
-    backgroundColor: cssVar('hoverColor'),
+    backgroundColor: cssVarV2('layer/background/hoverOverlay'),
   },
 });
 
@@ -120,7 +121,7 @@ export const tableHeaderTimestamp = style({
 
 export const tableHeaderDivider = style({
   height: 0,
-  borderTop: `0.5px solid ${cssVar('borderColor')}`,
+  borderTop: `0.5px solid ${cssVarV2('layer/insideBorder/border')}`,
   width: '100%',
   margin: '8px 0',
   '@media': {
@@ -155,7 +156,7 @@ export const tableBodySortable = style({
 export const addPropertyButton = style({
   alignSelf: 'flex-start',
   fontSize: cssVar('fontSm'),
-  color: `${cssVar('textSecondaryColor')}`,
+  color: `${cssVarV2('text/secondary')}`,
   padding: '0 4px',
   height: 36,
   fontWeight: 400,
@@ -168,10 +169,10 @@ export const addPropertyButton = style({
 });
 globalStyle(`${addPropertyButton} svg`, {
   fontSize: 16,
-  color: cssVar('iconSecondary'),
+  color: cssVarV2('icon/secondary'),
 });
 globalStyle(`${addPropertyButton}:hover svg`, {
-  color: cssVar('iconColor'),
+  color: cssVarV2('icon/primary'),
 });
 
 export const collapsedIcon = style({
@@ -190,7 +191,7 @@ export const propertyRow = style({
   position: 'relative',
   selectors: {
     '&[data-dragging=true]': {
-      backgroundColor: cssVar('hoverColor'),
+      backgroundColor: cssVarV2('layer/background/hoverOverlay'),
       borderTopLeftRadius: 0,
       borderBottomLeftRadius: 0,
     },
@@ -213,7 +214,7 @@ export const draggableItem = style({
       position: 'absolute',
       top: '50%',
       borderRadius: '2px',
-      backgroundColor: cssVar('placeholderColor'),
+      backgroundColor: cssVarV2('text/placeholder'),
       transform: 'translate(-12px, -50%)',
       transition: 'all 0.2s 0.1s',
       opacity: 0,
@@ -278,7 +279,7 @@ export const editablePropertyRowCell = style([
   {
     cursor: 'pointer',
     ':hover': {
-      backgroundColor: cssVar('hoverColor'),
+      backgroundColor: cssVarV2('layer/background/hoverOverlay'),
     },
   },
 ]);
@@ -288,7 +289,7 @@ export const propertyRowNameCell = style([
   {
     padding: `6px ${rowHPadding}`,
     flexShrink: 0,
-    color: cssVar('textSecondaryColor'),
+    color: cssVarV2('text/secondary'),
     width: propertyNameCellWidth,
     gap: 6,
   },
@@ -306,7 +307,7 @@ export const propertyRowIconContainer = style({
   justifyContent: 'center',
   borderRadius: '2px',
   fontSize: 16,
-  color: cssVar('iconSecondary'),
+  color: cssVarV2('icon/secondary'),
 });
 
 export const propertyRowNameContainer = style({
@@ -330,16 +331,16 @@ export const propertyRowValueCell = style([
   editablePropertyRowCell,
   {
     border: `1px solid transparent`,
-    color: cssVar('textPrimaryColor'),
+    color: cssVarV2('text/primary'),
     ':focus': {
-      backgroundColor: cssVar('hoverColor'),
+      backgroundColor: cssVarV2('layer/background/hoverOverlay'),
     },
     '::placeholder': {
-      color: cssVar('placeholderColor'),
+      color: cssVarV2('text/placeholder'),
     },
     selectors: {
       '&[data-empty="true"]': {
-        color: cssVar('placeholderColor'),
+        color: cssVarV2('text/placeholder'),
       },
       '&[data-readonly=true]': {
         pointerEvents: 'none',
@@ -412,7 +413,7 @@ export const menuHeader = style({
   gap: '8px',
   fontSize: cssVar('fontXs'),
   fontWeight: 500,
-  color: cssVar('textSecondaryColor'),
+  color: cssVarV2('text/secondary'),
   padding: '8px 16px',
   minWidth: 200,
   textTransform: 'uppercase',
@@ -468,7 +469,7 @@ export const propertyRowNamePopupRow = style({
   gap: '8px',
   fontSize: cssVar('fontSm'),
   fontWeight: 500,
-  color: cssVar('textSecondaryColor'),
+  color: cssVarV2('text/secondary'),
   padding: '8px 16px',
   minWidth: 260,
 });
@@ -506,11 +507,11 @@ export const selectorButton = style({
   padding: '4px 8px',
   cursor: 'pointer',
   ':hover': {
-    backgroundColor: cssVar('hoverColor'),
+    backgroundColor: cssVarV2('layer/background/hoverOverlay'),
   },
   selectors: {
     '&[data-required=true]': {
-      color: cssVar('textDisableColor'),
+      color: cssVarV2('text/disable'),
       pointerEvents: 'none',
     },
   },
@@ -528,9 +529,17 @@ export const propertyRowTypeItem = style({
 });
 
 export const propertyTypeName = style({
-  color: cssVar('textSecondaryColor'),
+  color: cssVarV2('text/secondary'),
   fontSize: cssVar('fontSm'),
   display: 'flex',
   alignItems: 'center',
   gap: 4,
 });
+
+export const backLinksMenu = style({
+  background: cssVarV2('layer/white'),
+  maxWidth: 'calc(var(--affine-editor-width) / 2)',
+  width: '100%',
+  maxHeight: '30vh',
+  overflowY: 'auto',
+});

packages/frontend/core/src/components/affine/page-properties/table.tsx

@@ -382,6 +382,7 @@ export const PageBacklinksPopup = ({
   return (
     <Menu
       contentOptions={{
+        className: styles.backLinksMenu,
         onClick(e) {
           e.stopPropagation();
         },