diff --git a/blocksuite/affine/components/src/toolbar/tooltip.ts b/blocksuite/affine/components/src/toolbar/tooltip.ts index 2aebe78e5..95abb7505 100644 --- a/blocksuite/affine/components/src/toolbar/tooltip.ts +++ b/blocksuite/affine/components/src/toolbar/tooltip.ts @@ -6,6 +6,7 @@ import { flip, offset, type Placement, + shift, } from '@floating-ui/dom'; import type { CSSResult } from 'lit'; import { css, html, LitElement, unsafeCSS } from 'lit'; @@ -68,6 +69,11 @@ const triangleMap = { }, }; +// The padding for the autoShift and autoFlip middleware +// It's used to prevent the tooltip from overflowing the screen +const AUTO_SHIFT_PADDING = 12; +const AUTO_FLIP_PADDING = 12; + // Ported from https://floating-ui.com/docs/tutorial#arrow-middleware const updateArrowStyles = ({ placement, @@ -166,7 +172,8 @@ export class Tooltip extends LitElement { referenceElement: this.parentElement!, placement: this.placement, middleware: [ - this.autoFlip && flip({ padding: 12 }), + this.autoFlip && flip({ padding: AUTO_FLIP_PADDING }), + this.autoShift && shift({ padding: AUTO_SHIFT_PADDING }), offset((this.arrow ? TRIANGLE_HEIGHT : 0) + this.offset), arrow({ element: portalRoot.shadowRoot!.querySelector('.arrow')!, @@ -248,6 +255,17 @@ export class Tooltip extends LitElement { @property({ attribute: false }) accessor autoFlip = true; + /** + * shifts the floating element to keep it in view. + * this prevents the floating element from + * overflowing along its axis of alignment, + * thereby preserving the side it’s placed on. + * + * See https://floating-ui.com/docs/shift + */ + @property({ attribute: false }) + accessor autoShift = false; + @property({ attribute: false }) accessor hoverOptions: Partial = {}; diff --git a/packages/frontend/core/src/blocksuite/presets/ai/_common/components/copy-more.ts b/packages/frontend/core/src/blocksuite/presets/ai/_common/components/copy-more.ts index 851054289..9bd7a047e 100644 --- a/packages/frontend/core/src/blocksuite/presets/ai/_common/components/copy-more.ts +++ b/packages/frontend/core/src/blocksuite/presets/ai/_common/components/copy-more.ts @@ -44,7 +44,6 @@ export class ChatCopyMore extends WithDisposable(LitElement) { display: flex; align-items: center; justify-content: center; - padding: 2px; svg { color: ${unsafeCSSVarV2('icon/primary')}; @@ -195,7 +194,7 @@ export class ChatCopyMore extends WithDisposable(LitElement) { data-testid="action-retry-button" > ${ResetIcon({ width: '20px', height: '20px' })} - Retry + Retry ` : nothing} ${isLast