From 7dde509970bff042160d13c2bc09688a427efb75 Mon Sep 17 00:00:00 2001
From: pengx17 <pengxiao@outlook.com>
Date: Tue, 3 Sep 2024 12:46:37 +0000
Subject: [PATCH] fix(core): page info modal styles (#8067)

---
 .../affine/page-properties/info-modal/info-modal.css.ts     | 5 +++++
 .../affine/page-properties/info-modal/info-modal.tsx        | 2 +-
 .../affine/page-properties/property-row-value-renderer.tsx  | 6 +++++-
 .../src/components/affine/page-properties/styles.css.ts     | 2 +-
 4 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/packages/frontend/core/src/components/affine/page-properties/info-modal/info-modal.css.ts b/packages/frontend/core/src/components/affine/page-properties/info-modal/info-modal.css.ts
index 1df2545fed..75ee3ea4e1 100644
--- a/packages/frontend/core/src/components/affine/page-properties/info-modal/info-modal.css.ts
+++ b/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({
diff --git a/packages/frontend/core/src/components/affine/page-properties/info-modal/info-modal.tsx b/packages/frontend/core/src/components/affine/page-properties/info-modal/info-modal.tsx
index c2ac243957..ddc5e438bd 100644
--- a/packages/frontend/core/src/components/affine/page-properties/info-modal/info-modal.tsx
+++ b/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 ? (
diff --git a/packages/frontend/core/src/components/affine/page-properties/property-row-value-renderer.tsx b/packages/frontend/core/src/components/affine/page-properties/property-row-value-renderer.tsx
index 465ec74caf..8be342b0cc 100644
--- a/packages/frontend/core/src/components/affine/page-properties/property-row-value-renderer.tsx
+++ b/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 = () => {
diff --git a/packages/frontend/core/src/components/affine/page-properties/styles.css.ts b/packages/frontend/core/src/components/affine/page-properties/styles.css.ts
index 037956ce0e..5c47a1c0ee 100644
--- a/packages/frontend/core/src/components/affine/page-properties/styles.css.ts
+++ b/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': {