From 1a8bbc695191f726f46c3e0510750c1ed4e53f96 Mon Sep 17 00:00:00 2001 From: L-Sun Date: Thu, 20 Jun 2024 07:33:25 +0000 Subject: [PATCH] fix: ask ai panel not auto flip (#7284) Close [AF-928](https://linear.app/affine-design/issue/AF-928/ask-ai-%E5%87%BA%E7%8E%B0%E5%9C%A8%E5%BA%95%E9%83%A8%E7%9A%84%E6%97%B6%E5%80%99-menu-%E5%BC%B9%E5%87%BA%E4%BD%8D%E7%BD%AE%E4%B8%8D%E5%AF%B9) The CSS rule for portal content uses `position: absolute` which causes the portal size to become zero. As a result, the `computePosition` function returns incorrect results. Before: ![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/MyRfgiN4RuBxJfrza3SG/5ae1d556-d818-42d4-a84c-ee5531015182.png) After: ![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/MyRfgiN4RuBxJfrza3SG/a61c47bc-541a-499a-8f20-3b3dd03b4e1d.png) --- .../presets/ai/_common/components/ask-ai-button.ts | 6 +++--- .../presets/ai/_common/components/ask-ai-panel.ts | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/frontend/core/src/blocksuite/presets/ai/_common/components/ask-ai-button.ts b/packages/frontend/core/src/blocksuite/presets/ai/_common/components/ask-ai-button.ts index a119344088..c4320bf30c 100644 --- a/packages/frontend/core/src/blocksuite/presets/ai/_common/components/ask-ai-button.ts +++ b/packages/frontend/core/src/blocksuite/presets/ai/_common/components/ask-ai-button.ts @@ -104,8 +104,8 @@ export class AskAIButton extends WithDisposable(LitElement) { >`, computePosition: { referenceElement: this, - placement: 'top-start', - middleware: [flip(), offset(-40)], + placement: 'bottom-start', + middleware: [flip(), offset({ mainAxis: 8, crossAxis: -6 })], autoUpdate: true, }, }; @@ -160,7 +160,7 @@ export class AskAIButton extends WithDisposable(LitElement) { computePosition: { referenceElement: this._askAIButton, placement: 'bottom-start', - middleware: [flip(), offset(4)], + middleware: [flip(), offset({ mainAxis: 8, crossAxis: -6 })], autoUpdate: true, }, abortController: this._abortController, diff --git a/packages/frontend/core/src/blocksuite/presets/ai/_common/components/ask-ai-panel.ts b/packages/frontend/core/src/blocksuite/presets/ai/_common/components/ask-ai-panel.ts index 0626c07c4a..62a9f973d1 100644 --- a/packages/frontend/core/src/blocksuite/presets/ai/_common/components/ask-ai-panel.ts +++ b/packages/frontend/core/src/blocksuite/presets/ai/_common/components/ask-ai-panel.ts @@ -13,7 +13,7 @@ import { getRootService } from '../../utils/selection-utils'; export class AskAIPanel extends WithDisposable(LitElement) { static override styles = css` :host { - position: absolute; + position: relative; } .ask-ai-panel {