From eb664f301665a3a12b71267a0a996f1dc2a31482 Mon Sep 17 00:00:00 2001
From: JimmFly <yangjinfei001@gmail.com>
Date: Thu, 10 Apr 2025 15:33:12 +0800
Subject: [PATCH] fix(core): improve share menu width and member name overflow
 handling (#11527)

---
 .../frontend/component/src/ui/tooltip/styles.css.ts   |  1 +
 .../src/blocksuite/block-suite-header/menu/index.tsx  |  6 +++++-
 .../blocksuite/block-suite-header/menu/style.css.ts   |  7 +++++++
 .../view/share-menu/copy-link-button.css.ts           | 11 ++++++++++-
 .../modules/share-menu/view/share-menu/index.css.ts   |  4 ++--
 .../view/share-menu/member-management/index.tsx       |  4 +++-
 .../view/share-menu/member-management/styles.css.ts   |  6 ++++++
 7 files changed, 34 insertions(+), 5 deletions(-)
 create mode 100644 packages/frontend/core/src/blocksuite/block-suite-header/menu/style.css.ts

diff --git a/packages/frontend/component/src/ui/tooltip/styles.css.ts b/packages/frontend/component/src/ui/tooltip/styles.css.ts
index 86ac360d4b..f3e0cbbec5 100644
--- a/packages/frontend/component/src/ui/tooltip/styles.css.ts
+++ b/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)`,
 });
diff --git a/packages/frontend/core/src/blocksuite/block-suite-header/menu/index.tsx b/packages/frontend/core/src/blocksuite/block-suite-header/menu/index.tsx
index e2febf253c..756ee4b61e 100644
--- a/packages/frontend/core/src/blocksuite/block-suite-header/menu/index.tsx
+++ b/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}
diff --git a/packages/frontend/core/src/blocksuite/block-suite-header/menu/style.css.ts b/packages/frontend/core/src/blocksuite/block-suite-header/menu/style.css.ts
new file mode 100644
index 0000000000..da3072d527
--- /dev/null
+++ b/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)',
+});
diff --git a/packages/frontend/core/src/modules/share-menu/view/share-menu/copy-link-button.css.ts b/packages/frontend/core/src/modules/share-menu/view/share-menu/copy-link-button.css.ts
index 209cdc4805..83b0390be5 100644
--- a/packages/frontend/core/src/modules/share-menu/view/share-menu/copy-link-button.css.ts
+++ b/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'),
diff --git a/packages/frontend/core/src/modules/share-menu/view/share-menu/index.css.ts b/packages/frontend/core/src/modules/share-menu/view/share-menu/index.css.ts
index 3b7c6184ff..ee7e735a7f 100644
--- a/packages/frontend/core/src/modules/share-menu/view/share-menu/index.css.ts
+++ b/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({
diff --git a/packages/frontend/core/src/modules/share-menu/view/share-menu/member-management/index.tsx b/packages/frontend/core/src/modules/share-menu/view/share-menu/member-management/index.tsx
index 7dc14307d2..a4164c2a2f 100644
--- a/packages/frontend/core/src/modules/share-menu/view/share-menu/member-management/index.tsx
+++ b/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>
         </>
diff --git a/packages/frontend/core/src/modules/share-menu/view/share-menu/member-management/styles.css.ts b/packages/frontend/core/src/modules/share-menu/view/share-menu/member-management/styles.css.ts
index 4bd87acb1b..2150cf8d3f 100644
--- a/packages/frontend/core/src/modules/share-menu/view/share-menu/member-management/styles.css.ts
+++ b/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({