fix(editor): adjust some ui style of embed card (#12055)

blocksuite/affine/blocks/embed/src/embed-synced-doc-block/styles.ts

@@ -476,9 +476,6 @@ export const cardStyles = css`
     width: ${EMBED_CARD_WIDTH.vertical}px;
     height: ${EMBED_CARD_HEIGHT.vertical}px;
     flex-direction: column-reverse;
-    margin-top: calc(
-      (${EMBED_CARD_HEIGHT.syncedDoc}px - ${EMBED_CARD_HEIGHT.vertical}px) / 2
-    );
 
     .affine-embed-synced-doc-card-content {
       width: 100%;

packages/frontend/core/src/blocksuite/extensions/edgeless-block-header/edgeless-block-header.css.ts

@@ -12,11 +12,18 @@ export const header = style({
   pointerEvents: 'none',
 });
 
-export const title = style({
+export const titleContainer = style({
   display: 'flex',
   alignItems: 'center',
   gap: 4,
   flex: 1,
+  overflow: 'hidden',
+  whiteSpace: 'nowrap',
+});
+
+const title = style({
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
   fontFamily: 'Inter',
 });
 

packages/frontend/core/src/blocksuite/extensions/edgeless-block-header/edgeless-embed-synced-doc-header.tsx

@@ -94,12 +94,12 @@ const Title = ({ model }: { model: EmbedSyncedDocModel }) => {
 
   return (
     <div
-      className={styles.embedSyncedDocTitle}
+      className={styles.titleContainer}
       data-collapsed={!!model.props.preFoldHeight}
       data-testid="edgeless-embed-synced-doc-title"
     >
       <LinkedPageIcon />
-      <span>{title}</span>
+      <span className={styles.embedSyncedDocTitle}>{title}</span>
     </div>
   );
 };

packages/frontend/core/src/blocksuite/extensions/edgeless-block-header/edgeless-note-header.tsx

@@ -93,11 +93,11 @@ const EdgelessNoteToggleButton = ({ note }: { note: NoteBlockModel }) => {
       >
         {collapsed ? <ToggleRightIcon /> : <ToggleDownIcon />}
       </IconButton>
-      <div className={styles.noteTitle} data-testid="edgeless-note-title">
+      <div className={styles.titleContainer} data-testid="edgeless-note-title">
         {collapsed && (
           <>
             {emoji && <span>{emoji}</span>}
-            <span>{titleWithoutEmoji}</span>
+            <span className={styles.noteTitle}>{titleWithoutEmoji}</span>
           </>
         )}
       </div>