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

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({