fix(sheets-ui): improve overflow handling and truncate long labels in sheet bar (#6437)

packages/sheets-ui/src/views/sheet-bar/sheet-bar-menu/SheetBarMenu.tsx

@@ -130,7 +130,7 @@ export function SheetBarMenu() {
     const items: IDropdownMenuProps['items'] = useMemo(() => menu.map((item) => ({
         type: 'item',
         children: (
-            <div className="univer-relative univer-box-border univer-pl-6">
+            <div className="univer-relative univer-box-border univer-overflow-hidden univer-truncate univer-pl-6">
                 {(item.selected || item.hidden) && (
                     <span className="univer-absolute univer-left-1 univer-top-0.5">
                         {item.selected && <CheckMarkIcon className="univer-size-4 univer-text-primary-600" />}
@@ -154,6 +154,7 @@ export function SheetBarMenu() {
 
     return (
         <DropdownMenu
+            className="univer-max-w-lg"
             align="start"
             items={items}
             open={visible}

packages/sheets-ui/src/views/sheet-bar/sheet-bar-tabs/SheetBarItem.tsx

@@ -34,7 +34,7 @@ export interface IBaseSheetBarProps {
 }
 
 export function SheetBarItem(props: IBaseSheetBarProps) {
-    const { sheetId, label, color, selected, menuOverlay } = props;
+    const { sheetId, label, color, selected } = props;
 
     const [currentSelected, setCurrentSelected] = useState(selected);
 
@@ -75,8 +75,9 @@ export function SheetBarItem(props: IBaseSheetBarProps) {
         >
             <div
                 className={`
-                  univer-box-border univer-flex univer-items-center univer-gap-1 univer-whitespace-nowrap univer-rounded
-                  univer-border-2 univer-border-solid univer-border-transparent univer-px-1.5 univer-py-1
+                  univer-box-border univer-flex univer-max-w-lg univer-items-center univer-gap-1 univer-overflow-hidden
+                  univer-whitespace-nowrap univer-rounded univer-border-2 univer-border-solid univer-border-transparent
+                  univer-px-1.5 univer-py-1
                 `}
             >
                 {label}

packages/sheets-ui/src/views/sheet-bar/sheet-bar-tabs/SheetBarTabs.tsx

@@ -82,11 +82,11 @@ export function SheetBarTabs() {
                 const name = hasProtect
                     ? (
                         <>
-                            <LockIcon />
-                            <span className="univer-outline-none">{sheet.getName()}</span>
+                            <LockIcon className="univer-shrink-0" />
+                            <span className="univer-truncate univer-outline-none">{sheet.getName()}</span>
                         </>
                     )
-                    : <span className="univer-outline-none">{sheet.getName()}</span>;
+                    : <span className="univer-truncate univer-outline-none">{sheet.getName()}</span>;
 
                 return {
                     sheetId: sheet.getSheetId(),