fix(core): improve share menu width and member name overflow handling (#11527)

packages/frontend/component/src/ui/tooltip/styles.css.ts

@@ -21,6 +21,7 @@ export const tooltipContent = style({
   lineHeight: '22px',
   borderRadius: '4px',
   maxWidth: '280px',
+  wordBreak: 'break-word',
   transformOrigin: 'var(--radix-tooltip-content-transform-origin)',
   animation: `${tooltipScaleIn} 0.2s cubic-bezier(0.2, 1, 0.3, 1)`,
 });

packages/frontend/core/src/blocksuite/block-suite-header/menu/index.tsx

@@ -49,6 +49,7 @@ import { useCallback, useState } from 'react';
 import { HeaderDropDownButton } from '../../../components/pure/header-drop-down-button';
 import { useFavorite } from '../favorite';
 import { HistoryTipsModal } from './history-tips-modal';
+import { shareMenu } from './style.css';
 
 type PageMenuProps = {
   rename?: () => void;
@@ -302,9 +303,12 @@ const PageHeaderMenuItem = ({
           subContentOptions={{
             sideOffset: 12,
             alignOffset: -8,
+
+            // to handle overflow when the width is not enough
+            collisionPadding: 20,
           }}
           items={
-            <div style={{ padding: 4 }}>
+            <div className={shareMenu}>
               <ShareMenuContent
                 workspaceMetadata={workspace.meta}
                 currentPage={page}

packages/frontend/core/src/blocksuite/block-suite-header/menu/style.css.ts

@@ -0,0 +1,7 @@
+import { style } from '@vanilla-extract/css';
+export const shareMenu = style({
+  padding: 4,
+  width: '420px',
+  // to handle overflow when the width is not enough
+  maxWidth: 'calc(var(--radix-dropdown-menu-content-available-width) - 8px)',
+});

packages/frontend/core/src/modules/share-menu/view/share-menu/copy-link-button.css.ts

@@ -1,7 +1,11 @@
 import { cssVarV2 } from '@toeverything/theme/v2';
-import { globalStyle, style } from '@vanilla-extract/css';
+import { createContainer, globalStyle, style } from '@vanilla-extract/css';
+
+const copyLinkContainer = createContainer('copy-link-container');
 
 export const copyLinkContainerStyle = style({
+  containerName: copyLinkContainer,
+  containerType: 'inline-size',
   display: 'flex',
   alignItems: 'center',
   width: '100%',
@@ -64,6 +68,11 @@ export const copyLinkShortcutStyle = style({
   opacity: 0.5,
   lineHeight: '20px',
   color: cssVarV2('text/pureWhite'),
+  '@container': {
+    [`${copyLinkContainer} (max-width: 320px)`]: {
+      display: 'none',
+    },
+  },
   selectors: {
     '&.secondary': {
       color: cssVarV2('text/secondary'),

packages/frontend/core/src/modules/share-menu/view/share-menu/index.css.ts

@@ -20,12 +20,12 @@ export const divider = style({
   margin: '4px 0px',
 });
 export const menuStyle = style({
-  width: '390px',
+  width: '420px',
   maxHeight: '562px',
   padding: '12px',
 });
 export const localMenuStyle = style({
-  width: '390px',
+  width: '420px',
   padding: '12px',
 });
 export const menuTriggerStyle = style({

packages/frontend/core/src/modules/share-menu/view/share-menu/member-management/index.tsx

@@ -129,7 +129,9 @@ export const MembersRow = ({ onClick }: { onClick: () => void }) => {
               name={docOwner.user.name}
               size={24}
             />
-            <span>{docOwner.user.name}</span>
+            <span title={docOwner.user.name} className={styles.memberNameStyle}>
+              {docOwner.user.name}
+            </span>
           </div>
           <div className={styles.OwnerStyle}>{t['Owner']()}</div>
         </>

packages/frontend/core/src/modules/share-menu/view/share-menu/member-management/styles.css.ts

@@ -34,6 +34,11 @@ export const memberContainerStyle = style({
   flex: 1,
   overflow: 'hidden',
 });
+export const memberNameStyle = style({
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+});
 export const descriptionStyle = style({
   textOverflow: 'ellipsis',
   overflow: 'hidden',
@@ -53,6 +58,7 @@ export const IconButtonStyle = style({
 export const OwnerStyle = style({
   color: cssVarV2('text/secondary'),
   fontSize: cssVar('fontSm'),
+  marginLeft: '8px',
 });
 
 export const avatarsContainerStyle = style({