fix(core): copy more button group style (#10240)

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<HoverOptions> = {};
 

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' })}
-              <affine-tooltip>Retry</affine-tooltip>
+              <affine-tooltip .autoShift=${true}>Retry</affine-tooltip>
             </div>`
           : nothing}
         ${isLast