From 3ca052c55f5390bd895b952a8e8760acfad1fe27 Mon Sep 17 00:00:00 2001
From: JimmFly <yangjinfei001@gmail.com>
Date: Sat, 19 Oct 2024 13:37:06 +0000
Subject: [PATCH] chore: adjust style of CloudUserAvatar (#8548)

close PD-1774

![CleanShot 2024-10-18 at 17 59 52@2x](https://github.com/user-attachments/assets/ac73fa27-25ab-4136-9008-7abde4491f92)
---
 .../doc-properties/types/created-updated-by.css.ts        | 5 +++++
 .../doc-properties/types/created-updated-by.tsx           | 8 +++++---
 2 files changed, 10 insertions(+), 3 deletions(-)
 create mode 100644 packages/frontend/core/src/components/doc-properties/types/created-updated-by.css.ts

diff --git a/packages/frontend/core/src/components/doc-properties/types/created-updated-by.css.ts b/packages/frontend/core/src/components/doc-properties/types/created-updated-by.css.ts
new file mode 100644
index 0000000000..b7bb7aa74c
--- /dev/null
+++ b/packages/frontend/core/src/components/doc-properties/types/created-updated-by.css.ts
@@ -0,0 +1,5 @@
+import { style } from '@vanilla-extract/css';
+export const userWrapper = style({
+  display: 'flex',
+  gap: '8px',
+});
diff --git a/packages/frontend/core/src/components/doc-properties/types/created-updated-by.tsx b/packages/frontend/core/src/components/doc-properties/types/created-updated-by.tsx
index 45ae473412..af7525131d 100644
--- a/packages/frontend/core/src/components/doc-properties/types/created-updated-by.tsx
+++ b/packages/frontend/core/src/components/doc-properties/types/created-updated-by.tsx
@@ -5,6 +5,8 @@ import { useI18n } from '@affine/i18n';
 import { useLiveData, useService, WorkspaceService } from '@toeverything/infra';
 import { useEffect, useMemo } from 'react';
 
+import { userWrapper } from './created-updated-by.css';
+
 const CloudUserAvatar = (props: { type: 'CreatedBy' | 'UpdatedBy' }) => {
   const cloudDocMetaService = useService(CloudDocMetaService);
   const cloudDocMeta = useLiveData(cloudDocMetaService.cloudDocMeta.meta$);
@@ -46,10 +48,10 @@ const CloudUserAvatar = (props: { type: 'CreatedBy' | 'UpdatedBy' }) => {
   }
   if (user) {
     return (
-      <>
-        <Avatar url={user.avatarUrl || ''} name={user.name} size={20} />
+      <div className={userWrapper}>
+        <Avatar url={user.avatarUrl || ''} name={user.name} size={22} />
         <span>{user.name}</span>
-      </>
+      </div>
     );
   }
   return <NoRecordValue />;