fix(editor): overflow of embed github card in edgeless note (#10442)

This PR fixes the overflow of the `embed-github-card` inside edgeless notes.

https://github.com/user-attachments/assets/21775d0f-e4c8-4fcc-86d8-aafb27033358

blocksuite/affine/block-embed/src/common/embed-block-element.ts

@@ -9,6 +9,7 @@ import {
   EMBED_CARD_WIDTH,
 } from '@blocksuite/affine-shared/consts';
 import { DocModeProvider } from '@blocksuite/affine-shared/services';
+import { findAncestorModel } from '@blocksuite/affine-shared/utils';
 import type { BlockService } from '@blocksuite/block-std';
 import type { GfxCompatibleProps } from '@blocksuite/block-std/gfx';
 import type { BlockModel } from '@blocksuite/store';
@@ -57,7 +58,15 @@ export class EmbedBlockComponent<
     ) {
       this.style.display = 'block';
 
-      if (this.std.get(DocModeProvider).getEditorMode() === 'edgeless') {
+      const insideNote = findAncestorModel(
+        this.model,
+        m => m.flavour === 'affine:note'
+      );
+
+      if (
+        !insideNote &&
+        this.std.get(DocModeProvider).getEditorMode() === 'edgeless'
+      ) {
         this.style.minWidth = `${EMBED_CARD_MIN_WIDTH}px`;
       }
     }

blocksuite/affine/block-embed/src/embed-github-block/styles.ts

@@ -2,6 +2,7 @@ import { css, html } from 'lit';
 
 export const styles = css`
   .affine-embed-github-block {
+    container: affine-embed-github-block / inline-size;
     box-sizing: border-box;
     display: flex;
     width: 100%;
@@ -24,6 +25,7 @@ export const styles = css`
     padding: 12px;
     border-radius: var(--1, 0px);
     opacity: var(--add, 1);
+    overflow: hidden;
   }
 
   .affine-embed-github-content-title {
@@ -376,6 +378,15 @@ export const styles = css`
       display: none;
     }
   }
+
+  @container affine-embed-github-block (width < 375px) {
+    .affine-embed-github-content {
+      width: 100%;
+    }
+    .affine-embed-github-banner {
+      display: none;
+    }
+  }
 `;
 
 export const GithubIcon = html`<svg