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

tests/affine-local/e2e/blocksuite/edgeless/embed.spec.ts

@@ -4,19 +4,20 @@ import {
   locateEditorContainer,
   locateElementToolbar,
 } from '@affine-test/kit/utils/editor';
+import { pressEnter } from '@affine-test/kit/utils/keyboard';
 import { openHomePage } from '@affine-test/kit/utils/load-page';
 import {
   clickNewPageButton,
+  type,
   waitForEditorLoad,
 } from '@affine-test/kit/utils/page-logic';
+import { isContainedInBoundingBox } from '@affine-test/kit/utils/utils';
 import { expect } from '@playwright/test';
 
-const title = 'Edgeless Note Header Test';
-
 test.beforeEach(async ({ page }) => {
   await openHomePage(page);
   await waitForEditorLoad(page);
-  await clickNewPageButton(page, title);
+  await clickNewPageButton(page);
   await clickEdgelessModeButton(page);
   const container = locateEditorContainer(page);
   await container.click();
@@ -40,3 +41,20 @@ test('should close embed editing modal when editor switching to page mode by sho
   await waitForEditorLoad(page);
   expect(editingModal).toBeHidden();
 });
+
+test('embed card should not overflow the edgeless note', async ({ page }) => {
+  const note = page.locator('affine-edgeless-note');
+  await note.dblclick();
+  await type(page, '/github');
+  await pressEnter(page);
+  await page
+    .locator('.embed-card-modal-input')
+    .fill('https://github.com/toeverything/AFFiNE/pull/10442');
+  await pressEnter(page);
+
+  const embedCard = page.locator('affine-embed-github-block');
+  await embedCard
+    .locator('.affine-embed-github-block:not(.loading)')
+    .waitFor({ state: 'visible' });
+  expect(await isContainedInBoundingBox(note, embedCard, true)).toBe(true);
+});

tests/kit/src/utils/utils.ts

@@ -1,6 +1,6 @@
 import { setTimeout } from 'node:timers/promises';
 
-import type { Page } from '@playwright/test';
+import type { Locator, Page } from '@playwright/test';
 import fs from 'fs-extra';
 
 export async function waitForLogMessage(
@@ -36,3 +36,37 @@ export async function removeWithRetry(
   // Add a return statement here to ensure that a value is always returned
   return false;
 }
+
+export async function isContainedInBoundingBox(
+  container: Locator,
+  element: Locator,
+  includeDescendant = false
+) {
+  const containerBox = await container.boundingBox();
+  if (!containerBox) {
+    throw new Error('Container bounding box not found');
+  }
+  const { x: cx, y: cy, width: cw, height: ch } = containerBox;
+
+  const inside = async (el: Locator): Promise<boolean> => {
+    const elBox = await el.boundingBox();
+    if (!elBox) {
+      throw new Error('Element bounding box not found');
+    }
+    const { x, y, width, height } = elBox;
+
+    return x >= cx && x + width <= cx + cw && y >= cy && y + height <= cy + ch;
+  };
+
+  let isInside = await inside(element);
+  if (!isInside) return false;
+
+  if (includeDescendant) {
+    const children = await element.locator('*:visible').all();
+    for (const child of children) {
+      isInside = await inside(child);
+      if (!isInside) return false;
+    }
+  }
+  return true;
+}