fix(core): page info modal styles (#8067)

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

@@ -1,12 +1,17 @@
 import { cssVar } from '@toeverything/theme';
 import { style } from '@vanilla-extract/css';
 
+import { rowHPadding } from '../styles.css';
+
 export const container = style({
   maxWidth: 480,
   minWidth: 360,
   padding: '20px 0',
   alignSelf: 'start',
   marginTop: '120px',
+  vars: {
+    [rowHPadding]: '6px',
+  },
 });
 
 export const titleContainer = style({

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

@@ -106,7 +106,7 @@ export const InfoTable = ({
   );
 
   return (
-    <div className={styles.container}>
+    <div>
       <TimeRow className={styles.timeRow} docId={docId} />
       <Divider size="thinner" />
       {backlinks && backlinks.length > 0 ? (

packages/frontend/core/src/components/affine/page-properties/property-row-value-renderer.tsx

@@ -265,7 +265,11 @@ const CloudUserAvatar = (props: { type: 'CreatedBy' | 'UpdatedBy' }) => {
 
 export const LocalUserValue = () => {
   const t = useI18n();
-  return <span>{t['com.affine.page-properties.local-user']()}</span>;
+  return (
+    <span className={styles.propertyRowValueCell}>
+      {t['com.affine.page-properties.local-user']()}
+    </span>
+  );
 };
 
 export const CreatedUserValue = () => {

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

@@ -267,6 +267,7 @@ export const propertyRowCell = style({
   fontSize: cssVar('fontSm'),
   lineHeight: '22px',
   userSelect: 'none',
+  padding: `6px ${rowHPadding} 6px 8px`,
   ':focus-visible': {
     outline: 'none',
   },
@@ -328,7 +329,6 @@ export const propertyRowValueCell = style([
   propertyRowCell,
   editablePropertyRowCell,
   {
-    padding: `6px ${rowHPadding} 6px 6px`,
     border: `1px solid transparent`,
     color: cssVar('textPrimaryColor'),
     ':focus': {