chore(editor): adjust size of synced doc (#12163)

Close [BS-3418](https://linear.app/affine-design/issue/BS-3418/折叠的embed-doc调整宽度时，会出现一个最小高度，不需要这个)

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

- **New Features**
  - Improved resizing and folding interactions for embedded synced documents in edgeless mode, including dynamic height calculation and enhanced drag-handle styling.
- **Bug Fixes**
  - Adjusted minimum height for synced document embeds to allow more compact display.
  - Ensured consistent width settings across embed cards.
- **Tests**
  - Added end-to-end tests covering folding, unfolding, and resizing behaviors for edgeless synced document embeds.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

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

@@ -4,7 +4,9 @@ import {
   clickView,
   createEdgelessNoteBlock,
   fitViewportToContent,
+  getSelectedXYWH,
   locateEditorContainer,
+  resizeElementByHandle,
 } from '@affine-test/kit/utils/editor';
 import { pressEnter } from '@affine-test/kit/utils/keyboard';
 import { openHomePage } from '@affine-test/kit/utils/load-page';
@@ -72,6 +74,7 @@ test.describe('edgeless', () => {
       .getByTestId('cmdk-quick-search')
       .getByText(/^Synced Block Test$/)
       .click();
+
     await fitViewportToContent(page);
   });
 
@@ -100,4 +103,61 @@ test.describe('edgeless', () => {
       await expect(headerTitle).toHaveText(title);
     });
   });
+
+  test.describe('size adjustment of embed synced doc', () => {
+    test('should fold embed synced doc when adjust height to smallest', async ({
+      page,
+    }) => {
+      const [, , , h] = await getSelectedXYWH(page);
+      await resizeElementByHandle(page, [0, -(h - 10)], 'bottom-right');
+
+      const embedBlock = page.locator('affine-embed-edgeless-synced-doc-block');
+      const foldButton = embedBlock.getByTestId(
+        'edgeless-embed-synced-doc-fold-button'
+      );
+      const content = embedBlock.locator('editor-host');
+
+      await expect(foldButton).toHaveAttribute('data-folded', 'true');
+      await expect(content).toBeHidden();
+
+      await foldButton.click();
+      await expect(foldButton).toHaveAttribute('data-folded', 'false');
+      await expect(content).toBeVisible();
+
+      await embedBlock.click();
+      const [, , , h2] = await getSelectedXYWH(page);
+      expect(
+        h2,
+        'should recover height when unfold embed synced doc which was resized to smallest height directly'
+      ).toEqual(h);
+    });
+
+    test('should be able to adjust height the folded embed synced doc', async ({
+      page,
+    }) => {
+      const embedBlock = page.locator('affine-embed-edgeless-synced-doc-block');
+
+      const content = embedBlock.locator('editor-host');
+      const foldButton = embedBlock.getByTestId(
+        'edgeless-embed-synced-doc-fold-button'
+      );
+      await foldButton.click();
+
+      await resizeElementByHandle(page, [50, 0], 'bottom-right');
+      await expect(content).toBeHidden();
+      await expect(foldButton).toHaveAttribute('data-folded', 'true');
+
+      await resizeElementByHandle(page, [-50, 0], 'bottom-right');
+      await expect(content).toBeHidden();
+      await expect(foldButton).toHaveAttribute('data-folded', 'true');
+
+      await resizeElementByHandle(page, [0, 50], 'bottom-right');
+      await expect(
+        content,
+        'should unfold the embed synced doc when adjust height to greater'
+      ).toBeVisible();
+      await expect(foldButton).toHaveAttribute('data-folded', 'false');
+      await expect(content).toBeVisible();
+    });
+  });
 });