fix(web): remove edgeless mode padding (#2061)

packages/component/src/components/block-suite-editor/index.tsx

@@ -89,10 +89,13 @@ const BlockSuiteEditorImpl = (props: EditorProps): ReactElement => {
       container.removeChild(editor);
     };
   }, [editor, page]);
+
+  // issue: https://github.com/toeverything/AFFiNE/issues/2004
+  const className = `editor-wrapper ${editor.mode}-mode`;
   return (
     <div
       data-testid={`editor-${props.page.id}`}
-      className="editor-wrapper"
+      className={className}
       style={props.style}
       ref={ref}
     />

packages/component/src/theme/global.css

@@ -194,6 +194,11 @@ input[type='number']::-webkit-outer-spin-button {
   padding: 0 2rem;
 }
 
+/* issue: https://github.com/toeverything/AFFiNE/issues/2004 */
+.editor-wrapper.edgeless-mode {
+  padding: 0;
+}
+
 .affine-default-page-block-title-container {
   margin-top: 40px;
   margin-bottom: 40px;
@@ -222,4 +227,9 @@ affine-block-hub {
     height: 100%;
     padding: 0 0.75rem;
   }
+
+  /* issue: https://github.com/toeverything/AFFiNE/issues/2004 */
+  .editor-wrapper.edgeless-mode {
+    padding: 0;
+  }
 }

tests/parallels/change-page-mode.spec.ts

@@ -12,6 +12,13 @@ test('Switch to edgeless by switch edgeless item', async ({ page }) => {
 
   const edgeless = page.locator('affine-edgeless-page');
   expect(await edgeless.isVisible()).toBe(true);
+
+  const editorWrapperPadding = await page
+    .locator('.editor-wrapper.edgeless-mode')
+    .evaluate(element => {
+      return window.getComputedStyle(element).getPropertyValue('padding');
+    });
+  expect(editorWrapperPadding).toBe('0px');
 });
 
 test('Convert to edgeless by editor header items', async ({ page }) => {