fix(core): change doc icon layout to avoid incorrect color caused by the transform (#13719)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Style**
* Updated document title styling for improved readability (larger font,
increased line height, heavier weight).
* Refined spacing so titles align correctly when a document icon is
present (no extra top padding).
* Improved emoji rendering by using a consistent font and removing an
unnecessary visual artifact.
* Simplified title container behavior to ensure stable, predictable
alignment without placeholder-based shifts.

* **Chores**
* Minor UI cleanup and consistency adjustments for the icon/title area.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

blocksuite/affine/fragments/doc-title/src/doc-title.ts

@@ -19,16 +19,16 @@ const DOC_BLOCK_CHILD_PADDING = 24;
 
 export class DocTitle extends WithDisposable(ShadowlessElement) {
   static override styles = css`
+    .doc-title-container {
+      font-size: 40px;
+      line-height: 50px;
+      font-weight: 700;
+    }
     .doc-icon-container,
     .doc-title-container {
       box-sizing: border-box;
       font-family: var(--affine-font-family);
-      font-size: var(--affine-font-base);
-      line-height: var(--affine-line-height);
       color: var(--affine-text-primary-color);
-      font-size: 40px;
-      line-height: 50px;
-      font-weight: 700;
       outline: none;
       resize: none;
       border: 0;
@@ -47,6 +47,10 @@ export class DocTitle extends WithDisposable(ShadowlessElement) {
         ${DOC_BLOCK_CHILD_PADDING}px
       );
     }
+    .doc-icon-container + * .doc-title-container {
+      /* when doc icon exists, remove the top padding */
+      padding-top: 0;
+    }
 
     /* Extra small devices (phones, 640px and down) */
     @container viewport (width <= 640px) {

packages/frontend/core/src/blocksuite/block-suite-editor/doc-icon-picker.css.ts

@@ -11,7 +11,10 @@ export const docIconPickerTrigger = style({
       lineHeight: 1,
     },
     '&[data-icon-type="emoji"]': {
-      fontFamily: 'emoji',
+      fontFamily: 'Inter',
+    },
+    '&::after': {
+      display: 'none',
     },
   },
 });

packages/frontend/core/src/blocksuite/block-suite-editor/doc-icon-picker.tsx

@@ -6,21 +6,13 @@ import { useLiveData, useService } from '@toeverything/infra';
 
 import * as styles from './doc-icon-picker.css';
 
-const TitleContainer = ({
+const TitleContainer = ({ children }: { children: React.ReactNode }) => {
-  children,
-  isPlaceholder,
-}: {
-  children: React.ReactNode;
-  isPlaceholder: boolean;
-}) => {
   return (
     <div
       className="doc-icon-container"
       style={{
         paddingTop: 0,
         paddingBottom: 0,
-        // title container has `padding-top`
-        transform: isPlaceholder ? 'translateY(80%)' : 'translateY(50%)',
       }}
     >
       {children}
@@ -54,7 +46,7 @@ export const DocIconPicker = ({
   }
 
   return (
-    <TitleContainer isPlaceholder={isPlaceholder}>
+    <TitleContainer>
       <IconEditor
         icon={icon?.icon}
         onIconChange={data => {