diff --git a/packages/frontend/core/src/components/blocksuite/block-suite-editor/bi-directional-link-panel.css.ts b/packages/frontend/core/src/components/blocksuite/block-suite-editor/bi-directional-link-panel.css.ts
index 3d58d0d0a..936555e61 100644
--- a/packages/frontend/core/src/components/blocksuite/block-suite-editor/bi-directional-link-panel.css.ts
+++ b/packages/frontend/core/src/components/blocksuite/block-suite-editor/bi-directional-link-panel.css.ts
@@ -9,6 +9,11 @@ export const container = style({
   paddingLeft: cssVar('--affine-editor-side-padding', '24'),
   paddingRight: cssVar('--affine-editor-side-padding', '24'),
   fontSize: cssVar('--affine-font-base'),
+  '@container': {
+    [`viewport (width <= 640px)`]: {
+      padding: '0 24px',
+    },
+  },
 });
 
 export const dividerContainer = style({