fix(sheets-ui): improve layout and styling of status bar items (#5975)

2026-09-24 15:32:18 +08:00 · 2025-10-15 20:05:03 +08:00
parent 252e8d3f0a
commit 6121b2113d
76 changed files with 1453 additions and 1442 deletions
@@ -92,6 +92,14 @@ export const baseRules: Partial<Rules> = {
    'react/no-unstable-default-props': 'warn',
    'react/no-direct-mutation-state': 'warn',
    'react/no-create-ref': 'warn',
+    'react-hooks/static-components': 'off',
+    'react-hooks/preserve-manual-memoization': 'off',
+    'react-hooks/set-state-in-effect': 'off',
+    'react-hooks/refs': 'off',
+    'react-hooks/immutability': 'warn',
+    'react-hooks/use-memo': 'warn',
+    'react-hooks/purity': 'warn',
+    'react-hooks/globals': 'warn',

    // Import and export rules
    'sort-imports': [
@@ -25,24 +25,24 @@
        "univer-cli": "bin/index.ts"
    },
    "dependencies": {
-        "@typescript-eslint/parser": "^8.46.0",
+        "@typescript-eslint/parser": "^8.46.1",
        "@vitejs/plugin-react": "^5.0.4",
        "@vitejs/plugin-vue": "^6.0.1",
        "@vitest/coverage-istanbul": "^3.2.4",
        "autoprefixer": "^10.4.21",
-        "eslint-plugin-better-tailwindcss": "^3.7.9",
+        "eslint-plugin-better-tailwindcss": "^3.7.10",
        "eslint-plugin-header": "^3.1.1",
        "eslint-plugin-no-barrel-import": "^0.0.2",
        "eslint-plugin-no-penetrating-import": "^0.0.1",
        "fs-extra": "^11.3.2",
-        "happy-dom": "20.0.0",
+        "happy-dom": "20.0.1",
        "javascript-obfuscator": "^4.1.1",
        "postcss-preset-env": "^10.4.0",
        "postcss-replace": "^2.0.1",
        "sort-keys": "^6.0.0",
-        "tailwind-scrollbar": "^4.0.2",
+        "tailwind-scrollbar": "^3",
        "tailwindcss": "3.4.17",
-        "vite": "^7.1.9",
+        "vite": "^7.1.10",
        "vite-plugin-dts": "^4.5.4",
        "vite-plugin-external": "^6.2.2",
        "vitest": "^3.2.4"
@@ -93,7 +93,7 @@
        "@types/fs-extra": "^11.0.4",
        "@univerjs-infra/shared": "workspace:*",
        "detect-port": "^2.1.0",
-        "esbuild": "^0.25.10",
+        "esbuild": "^0.25.11",
        "esbuild-plugin-alias": "^0.2.1",
        "esbuild-plugin-clean": "^1.0.1",
        "esbuild-plugin-copy": "^2.1.1",
@@ -3,7 +3,7 @@
    "type": "module",
    "version": "0.10.10",
    "private": true,
-    "packageManager": "pnpm@10.17.1",
+    "packageManager": "pnpm@10.18.3",
    "author": "DreamNum Co., Ltd. <developer@univer.ai>",
    "license": "Apache-2.0",
    "funding": {
@@ -45,17 +45,17 @@
        "release": "release-it"
    },
    "devDependencies": {
-        "@antfu/eslint-config": "5.4.1",
-        "@commitlint/cli": "^19.8.1",
-        "@commitlint/config-conventional": "^19.8.1",
-        "@eslint-react/eslint-plugin": "^1.53.0",
+        "@antfu/eslint-config": "^6.0.0",
+        "@commitlint/cli": "^20.1.0",
+        "@commitlint/config-conventional": "^20.0.0",
+        "@eslint-react/eslint-plugin": "^2.2.2",
        "@playwright/test": "^1.56.0",
        "@release-it-plugins/workspaces": "^5.0.3",
        "@release-it/conventional-changelog": "^10.0.1",
        "@types/fs-extra": "^11.0.4",
-        "@types/node": "^24.7.1",
+        "@types/node": "^24.7.2",
        "@types/react": "19.2.2",
-        "@types/react-dom": "19.2.1",
+        "@types/react-dom": "19.2.2",
        "@univerjs-infra/shared": "workspace:*",
        "@univerjs/design": "workspace:*",
        "@vitejs/plugin-react": "^5.0.4",
@@ -63,11 +63,11 @@
        "eslint-plugin-format": "^1.0.2",
        "eslint-plugin-react": "^7.37.5",
        "eslint-plugin-react-hooks": "7.0.0",
-        "eslint-plugin-react-refresh": "^0.4.23",
+        "eslint-plugin-react-refresh": "^0.4.24",
        "fs-extra": "^11.3.2",
        "husky": "^9.1.7",
-        "lint-staged": "^16.2.3",
-        "posthog-node": "^5.9.5",
+        "lint-staged": "^16.2.4",
+        "posthog-node": "^5.10.0",
        "react": "19.2.0",
        "react-dom": "19.2.0",
        "release-it": "^19.0.5",
@@ -85,7 +85,7 @@
    },
    "resolutions": {
        "@types/react": "19.2.2",
-        "@types/react-dom": "19.2.1",
+        "@types/react-dom": "19.2.2",
        "react": "19.2.0",
        "react-dom": "19.2.0"
    },
@@ -76,7 +76,7 @@
        "rxjs": "^7.8.2",
        "tailwindcss": "3.4.17",
        "typescript": "^5.9.3",
-        "vite": "^7.1.9",
+        "vite": "^7.1.10",
        "vitest": "^3.2.4",
        "vue": "^3.5.22"
    }
@@ -73,7 +73,7 @@
        "rxjs": "^7.8.2",
        "tailwindcss": "3.4.17",
        "typescript": "^5.9.3",
-        "vite": "^7.1.9",
+        "vite": "^7.1.10",
        "vitest": "^3.2.4"
    }
 }
@@ -86,7 +86,7 @@
        "rxjs": "^7.8.2",
        "tailwindcss": "3.4.17",
        "typescript": "^5.9.3",
-        "vite": "^7.1.9",
+        "vite": "^7.1.10",
        "vitest": "^3.2.4"
    }
 }
@@ -61,7 +61,7 @@
    "devDependencies": {
        "@univerjs-infra/shared": "workspace:*",
        "typescript": "^5.9.3",
-        "vite": "^7.1.9",
+        "vite": "^7.1.10",
        "vitest": "^3.2.4"
    }
 }
@@ -78,7 +78,7 @@
        "rxjs": "^7.8.2",
        "tailwindcss": "3.4.17",
        "typescript": "^5.9.3",
-        "vite": "^7.1.9",
+        "vite": "^7.1.10",
        "vitest": "^3.2.4"
    }
 }
@@ -74,7 +74,7 @@
        "rxjs": "^7.8.2",
        "tailwindcss": "3.4.17",
        "typescript": "^5.9.3",
-        "vite": "^7.1.9",
+        "vite": "^7.1.10",
        "vitest": "^3.2.4"
    }
 }
@@ -80,7 +80,7 @@
        "rxjs": "^7.8.2",
        "tailwindcss": "3.4.17",
        "typescript": "^5.9.3",
-        "vite": "^7.1.9",
+        "vite": "^7.1.10",
        "vitest": "^3.2.4"
    }
 }
@@ -180,8 +180,8 @@ export const UniControls = ({ zoom, onItemClick }: { zoom: number; onItemClick?:
                      univer-h-7 univer-w-[55px] univer-cursor-pointer univer-rounded univer-text-center univer-text-xs
                      univer-leading-loose univer-text-gray-700 univer-no-underline univer-transition-all
                      univer-duration-200
-                      hover:univer-bg-gray-200
                      group-data-[open=true]:univer-bg-gray-200
+                      hover:univer-bg-gray-200
                    `}
                >
                    {zoomPercent}
@@ -80,7 +80,7 @@
        "rxjs": "^7.8.2",
        "tailwindcss": "3.4.17",
        "typescript": "^5.9.3",
-        "vite": "^7.1.9",
+        "vite": "^7.1.10",
        "vitest": "^3.2.4"
    }
 }
@@ -93,7 +93,7 @@
        "@univerjs-infra/shared": "workspace:*",
        "rxjs": "^7.8.2",
        "typescript": "^5.9.3",
-        "vite": "^7.1.9",
+        "vite": "^7.1.10",
        "vitest": "^3.2.4"
    }
 }
@@ -70,7 +70,7 @@
        "@univerjs/sheets": "workspace:*",
        "rxjs": "^7.8.2",
        "typescript": "^5.9.3",
-        "vite": "^7.1.9",
+        "vite": "^7.1.10",
        "vitest": "^3.2.4"
    }
 }
@@ -88,7 +88,7 @@
        "tailwind-merge": "2.6.0"
    },
    "devDependencies": {
-        "@testing-library/jest-dom": "^6.8.0",
+        "@testing-library/jest-dom": "6.9.1",
        "@testing-library/react": "^16.3.0",
        "@types/react-grid-layout": "^1.3.5",
        "@types/react-transition-group": "^4.4.12",
@@ -100,7 +100,7 @@
        "tailwindcss": "3.4.17",
        "tailwindcss-animate": "^1.0.7",
        "typescript": "^5.9.3",
-        "vite": "^7.1.9",
+        "vite": "^7.1.10",
        "vitest": "^3.2.4"
    }
 }
@@ -102,9 +102,9 @@ function DropdownMenuSubTrigger({
                `
                  univer-flex univer-cursor-default univer-select-none univer-items-center univer-justify-between
                  univer-gap-2 univer-rounded univer-px-2 univer-py-1.5 univer-text-sm univer-outline-none
-                  focus:univer-bg-gray-100
                  data-[state=open]:univer-bg-gray-100
-                  dark:focus:!univer-bg-gray-600 dark:data-[state=open]:!univer-bg-gray-600
+                  focus:univer-bg-gray-100
+                  dark:data-[state=open]:!univer-bg-gray-600 dark:focus:!univer-bg-gray-600
                  [&_svg]:univer-pointer-events-none [&_svg]:univer-size-4 [&_svg]:univer-shrink-0
                `,
                className
@@ -201,8 +201,8 @@ function DropdownMenuItem({
                `
                  univer-relative univer-flex univer-cursor-default univer-select-none univer-items-center univer-gap-2
                  univer-rounded univer-px-2 univer-py-1.5 univer-text-sm univer-outline-none univer-transition-colors
-                  focus:univer-bg-gray-100
                  data-[disabled]:univer-pointer-events-none data-[disabled]:univer-opacity-50
+                  focus:univer-bg-gray-100
                  dark:focus:!univer-bg-gray-600
                  [&>svg]:univer-size-4 [&>svg]:univer-shrink-0
                `,
@@ -227,8 +227,8 @@ function DropdownMenuCheckboxItem({
                `
                  univer-relative univer-flex univer-cursor-default univer-select-none univer-items-center
                  univer-rounded univer-py-1.5 univer-pr-2 univer-text-sm univer-outline-none univer-transition-colors
-                  focus:univer-bg-gray-100
                  data-[disabled]:univer-pointer-events-none data-[disabled]:univer-opacity-50
+                  focus:univer-bg-gray-100
                  dark:focus:!univer-bg-gray-600
                `,
                {
@@ -272,8 +272,8 @@ function DropdownMenuRadioItem({
                `
                  univer-relative univer-flex univer-cursor-default univer-select-none univer-items-center
                  univer-rounded univer-py-1.5 univer-pr-2 univer-text-sm univer-outline-none univer-transition-colors
-                  focus:univer-bg-gray-100
                  data-[disabled]:univer-pointer-events-none data-[disabled]:univer-opacity-50
+                  focus:univer-bg-gray-100
                  dark:focus:!univer-bg-gray-600
                `,
                {
@@ -83,7 +83,7 @@
        "rxjs": "^7.8.2",
        "tailwindcss": "3.4.17",
        "typescript": "^5.9.3",
-        "vite": "^7.1.9",
+        "vite": "^7.1.10",
        "vitest": "^3.2.4"
    }
 }
@@ -62,7 +62,7 @@
    "devDependencies": {
        "@univerjs-infra/shared": "workspace:*",
        "typescript": "^5.9.3",
-        "vite": "^7.1.9",
+        "vite": "^7.1.10",
        "vitest": "^3.2.4"
    }
 }
@@ -82,7 +82,7 @@
        "rxjs": "^7.8.2",
        "tailwindcss": "3.4.17",
        "typescript": "^5.9.3",
-        "vite": "^7.1.9",
+        "vite": "^7.1.10",
        "vitest": "^3.2.4"
    }
 }
@@ -61,7 +61,7 @@
    "devDependencies": {
        "@univerjs-infra/shared": "workspace:*",
        "typescript": "^5.9.3",
-        "vite": "^7.1.9",
+        "vite": "^7.1.10",
        "vitest": "^3.2.4"
    }
 }
@@ -75,7 +75,7 @@
        "rxjs": "^7.8.2",
        "tailwindcss": "3.4.17",
        "typescript": "^5.9.3",
-        "vite": "^7.1.9",
+        "vite": "^7.1.10",
        "vitest": "^3.2.4"
    }
 }
@@ -85,7 +85,7 @@
        "rxjs": "^7.8.2",
        "tailwindcss": "3.4.17",
        "typescript": "^5.9.3",
-        "vite": "^7.1.9",
+        "vite": "^7.1.10",
        "vitest": "^3.2.4"
    }
 }
@@ -76,7 +76,7 @@
        "rxjs": "^7.8.2",
        "tailwindcss": "3.4.17",
        "typescript": "^5.9.3",
-        "vite": "^7.1.9",
+        "vite": "^7.1.10",
        "vitest": "^3.2.4"
    }
 }
@@ -91,13 +91,13 @@
        "@univerjs-infra/shared": "workspace:*",
        "@univerjs/docs-drawing": "workspace:*",
        "jest-canvas-mock": "^2.5.2",
-        "jsdom": "^26.1.0",
+        "jsdom": "^27.0.0",
        "postcss": "^8.5.6",
        "react": "18.3.1",
        "rxjs": "^7.8.2",
        "tailwindcss": "3.4.17",
        "typescript": "^5.9.3",
-        "vite": "^7.1.9",
+        "vite": "^7.1.10",
        "vitest": "^3.2.4"
    }
 }
@@ -68,7 +68,7 @@
        "@univerjs-infra/shared": "workspace:*",
        "rxjs": "^7.8.2",
        "typescript": "^5.9.3",
-        "vite": "^7.1.9",
+        "vite": "^7.1.10",
        "vitest": "^3.2.4"
    }
 }
@@ -80,7 +80,7 @@
        "rxjs": "^7.8.2",
        "tailwindcss": "3.4.17",
        "typescript": "^5.9.3",
-        "vite": "^7.1.9",
+        "vite": "^7.1.10",
        "vitest": "^3.2.4"
    }
 }
@@ -66,7 +66,7 @@
        "@univerjs-infra/shared": "workspace:*",
        "rxjs": "^7.8.2",
        "typescript": "^5.9.3",
-        "vite": "^7.1.9",
+        "vite": "^7.1.10",
        "vitest": "^3.2.4"
    }
 }
@@ -81,7 +81,7 @@
        "@univerjs-infra/shared": "workspace:*",
        "rxjs": "^7.8.2",
        "typescript": "^5.9.3",
-        "vite": "^7.1.9",
+        "vite": "^7.1.10",
        "vitest": "^3.2.4"
    }
 }
@@ -73,7 +73,7 @@
        "@univerjs-infra/shared": "workspace:*",
        "rxjs": "^7.8.2",
        "typescript": "^5.9.3",
-        "vite": "^7.1.9",
+        "vite": "^7.1.10",
        "vitest": "^3.2.4"
    },
    "browser": {
@@ -81,7 +81,7 @@
        "rxjs": "^7.8.2",
        "tailwindcss": "3.4.17",
        "typescript": "^5.9.3",
-        "vite": "^7.1.9",
+        "vite": "^7.1.10",
        "vitest": "^3.2.4"
    }
 }
@@ -77,7 +77,7 @@
        "@univerjs-infra/shared": "workspace:*",
        "rxjs": "^7.8.2",
        "typescript": "^5.9.3",
-        "vite": "^7.1.9",
+        "vite": "^7.1.10",
        "vitest": "^3.2.4"
    }
 }
@@ -66,7 +66,7 @@
        "@univerjs-infra/shared": "workspace:*",
        "rxjs": "^7.8.2",
        "typescript": "^5.9.3",
-        "vite": "^7.1.9",
+        "vite": "^7.1.10",
        "vitest": "^3.2.4"
    }
 }
@@ -66,7 +66,7 @@
        "@univerjs-infra/shared": "workspace:*",
        "rxjs": "^7.8.2",
        "typescript": "^5.9.3",
-        "vite": "^7.1.9",
+        "vite": "^7.1.10",
        "vitest": "^3.2.4"
    }
 }
@@ -86,7 +86,7 @@
        "rxjs": "^7.8.2",
        "tailwindcss": "3.4.17",
        "typescript": "^5.9.3",
-        "vite": "^7.1.9",
+        "vite": "^7.1.10",
        "vitest": "^3.2.4"
    }
 }
@@ -430,8 +430,8 @@ export const RuleList = (props: IRuleListProps) => {
                                              univer-absolute univer-right-1 univer-hidden univer-size-6
                                              univer-cursor-pointer univer-items-center univer-justify-center
                                              univer-rounded
-                                              hover:univer-bg-gray-200
                                              group-hover:univer-flex
+                                              hover:univer-bg-gray-200
                                            `, {
                                                'univer-flex univer-items-center univer-justify-center': draggingId === index,
                                            })}
@@ -83,7 +83,7 @@
        "@univerjs/icons-svg": "^0.4.9",
        "rxjs": "^7.8.2",
        "typescript": "^5.9.3",
-        "vite": "^7.1.9",
+        "vite": "^7.1.10",
        "vitest": "^3.2.4"
    }
 }
@@ -92,7 +92,7 @@
        "rxjs": "^7.8.2",
        "tailwindcss": "3.4.17",
        "typescript": "^5.9.3",
-        "vite": "^7.1.9",
+        "vite": "^7.1.10",
        "vitest": "^3.2.4"
    }
 }
@@ -90,7 +90,7 @@
        "rxjs": "^7.8.2",
        "tailwindcss": "3.4.17",
        "typescript": "^5.9.3",
-        "vite": "^7.1.9",
+        "vite": "^7.1.10",
        "vitest": "^3.2.4"
    }
 }
@@ -84,7 +84,7 @@
        "@univerjs-infra/shared": "workspace:*",
        "rxjs": "^7.8.2",
        "typescript": "^5.9.3",
-        "vite": "^7.1.9",
+        "vite": "^7.1.10",
        "vitest": "^3.2.4"
    }
 }
@@ -96,7 +96,7 @@
        "rxjs": "^7.8.2",
        "tailwindcss": "3.4.17",
        "typescript": "^5.9.3",
-        "vite": "^7.1.9",
+        "vite": "^7.1.10",
        "vitest": "^3.2.4"
    }
 }
@@ -63,7 +63,7 @@
        "@univerjs-infra/shared": "workspace:*",
        "@univerjs/sheets": "workspace:*",
        "typescript": "^5.9.3",
-        "vite": "^7.1.9",
+        "vite": "^7.1.10",
        "vitest": "^3.2.4"
    }
 }
@@ -84,7 +84,7 @@
        "rxjs": "^7.8.2",
        "tailwindcss": "3.4.17",
        "typescript": "^5.9.3",
-        "vite": "^7.1.9",
+        "vite": "^7.1.10",
        "vitest": "^3.2.4"
    }
 }
@@ -80,7 +80,7 @@
        "@univerjs-infra/shared": "workspace:*",
        "rxjs": "^7.8.2",
        "typescript": "^5.9.3",
-        "vite": "^7.1.9",
+        "vite": "^7.1.10",
        "vitest": "^3.2.4"
    }
 }
@@ -88,7 +88,7 @@
        "@univerjs-infra/shared": "workspace:*",
        "rxjs": "^7.8.2",
        "typescript": "^5.9.3",
-        "vite": "^7.1.9",
+        "vite": "^7.1.10",
        "vitest": "^3.2.4"
    }
 }
@@ -97,7 +97,7 @@
        "rxjs": "^7.8.2",
        "tailwindcss": "3.4.17",
        "typescript": "^5.9.3",
-        "vite": "^7.1.9",
+        "vite": "^7.1.10",
        "vitest": "^3.2.4"
    }
 }
@@ -88,7 +88,7 @@
        "@univerjs/engine-render": "workspace:*",
        "rxjs": "^7.8.2",
        "typescript": "^5.9.3",
-        "vite": "^7.1.9",
+        "vite": "^7.1.10",
        "vitest": "^3.2.4"
    }
 }
@@ -63,7 +63,7 @@
    "devDependencies": {
        "@univerjs-infra/shared": "workspace:*",
        "typescript": "^5.9.3",
-        "vite": "^7.1.9",
+        "vite": "^7.1.10",
        "vitest": "^3.2.4"
    }
 }
@@ -100,7 +100,7 @@
        "rxjs": "^7.8.2",
        "tailwindcss": "3.4.17",
        "typescript": "^5.9.3",
-        "vite": "^7.1.9",
+        "vite": "^7.1.10",
        "vitest": "^3.2.4"
    }
 }
@@ -79,7 +79,7 @@
        "@univerjs-infra/shared": "workspace:*",
        "rxjs": "^7.8.2",
        "typescript": "^5.9.3",
-        "vite": "^7.1.9",
+        "vite": "^7.1.10",
        "vitest": "^3.2.4"
    }
 }
@@ -80,7 +80,7 @@
        "rxjs": "^7.8.2",
        "tailwindcss": "3.4.17",
        "typescript": "^5.9.3",
-        "vite": "^7.1.9",
+        "vite": "^7.1.10",
        "vitest": "^3.2.4"
    }
 }
@@ -77,7 +77,7 @@
        "@univerjs-infra/shared": "workspace:*",
        "rxjs": "^7.8.2",
        "typescript": "^5.9.3",
-        "vite": "^7.1.9",
+        "vite": "^7.1.10",
        "vitest": "^3.2.4"
    }
 }
@@ -85,7 +85,7 @@
        "rxjs": "^7.8.2",
        "tailwindcss": "3.4.17",
        "typescript": "^5.9.3",
-        "vite": "^7.1.9",
+        "vite": "^7.1.10",
        "vitest": "^3.2.4"
    }
 }
@@ -80,7 +80,7 @@
        "@univerjs-infra/shared": "workspace:*",
        "rxjs": "^7.8.2",
        "typescript": "^5.9.3",
-        "vite": "^7.1.9",
+        "vite": "^7.1.10",
        "vitest": "^3.2.4"
    }
 }
@@ -83,7 +83,7 @@
        "rxjs": "^7.8.2",
        "tailwindcss": "3.4.17",
        "typescript": "^5.9.3",
-        "vite": "^7.1.9",
+        "vite": "^7.1.10",
        "vitest": "^3.2.4"
    }
 }
@@ -80,7 +80,7 @@
    "devDependencies": {
        "@univerjs-infra/shared": "workspace:*",
        "typescript": "^5.9.3",
-        "vite": "^7.1.9",
+        "vite": "^7.1.10",
        "vitest": "^3.2.4"
    }
 }
@@ -90,7 +90,7 @@
        "rxjs": "^7.8.2",
        "tailwindcss": "3.4.17",
        "typescript": "^5.9.3",
-        "vite": "^7.1.9",
+        "vite": "^7.1.10",
        "vitest": "^3.2.4"
    }
 }
@@ -81,7 +81,7 @@
        "@univerjs-infra/shared": "workspace:*",
        "rxjs": "^7.8.2",
        "typescript": "^5.9.3",
-        "vite": "^7.1.9",
+        "vite": "^7.1.10",
        "vitest": "^3.2.4"
    }
 }
@@ -84,7 +84,7 @@
        "rxjs": "^7.8.2",
        "tailwindcss": "3.4.17",
        "typescript": "^5.9.3",
-        "vite": "^7.1.9",
+        "vite": "^7.1.10",
        "vitest": "^3.2.4"
    }
 }
@@ -79,7 +79,7 @@
        "@univerjs-infra/shared": "workspace:*",
        "rxjs": "^7.8.2",
        "typescript": "^5.9.3",
-        "vite": "^7.1.9",
+        "vite": "^7.1.10",
        "vitest": "^3.2.4"
    }
 }
@@ -99,7 +99,7 @@
        "rxjs": "^7.8.2",
        "tailwindcss": "3.4.17",
        "typescript": "^5.9.3",
-        "vite": "^7.1.9",
+        "vite": "^7.1.10",
        "vitest": "^3.2.4"
    }
 }
@@ -132,38 +132,29 @@ export const StatusBar = () => {
                    return acc;
                }, []);

-                return (
-                    <>
-                        {doubleLineList.map((item, index) => (
-                            <div key={`stat-col-${index}`}>
-                                {item[0] && (
-                                    <CopyableStatisticItem
-                                        key={item[0].name}
-                                        {...item[0]}
-                                    />
-                                )}
-                                {item[1] && (
-                                    <CopyableStatisticItem
-                                        key={item[1].name}
-                                        {...item[1]}
-                                    />
-                                )}
-                            </div>
-                        ))}
-                    </>
-                );
+                return doubleLineList.map((item, index) => (
+                    <div key={`stat-col-${index}`} className="univer-grid univer-h-full univer-items-center">
+                        {item[0] && (
+                            <CopyableStatisticItem
+                                key={item[0].name}
+                                {...item[0]}
+                            />
+                        )}
+                        {item[1] && (
+                            <CopyableStatisticItem
+                                key={item[1].name}
+                                {...item[1]}
+                            />
+                        )}
+                    </div>
+                ));
            }

-            return (
-                <>
-                    {showList.map((item) => (
-                        <CopyableStatisticItem
-                            key={item.name}
-                            {...item}
-                        />
-                    ))}
-                </>
-            );
+            return showList.map((item) => (
+                <div key={item.name} className="univer-grid univer-h-full univer-items-center">
+                    <CopyableStatisticItem {...item} />
+                </div>
+            ));
        }, [showList, rowCountThreshold, CopyableStatisticItem]);

        return renderContent;
@@ -175,15 +166,16 @@ export const StatusBar = () => {
        show && (
            <div
                className={clsx(`
-                  univer-relative univer-box-border univer-flex univer-items-center univer-px-2
+                  univer-relative univer-box-border univer-flex univer-h-full univer-items-center univer-overflow-hidden
+                  univer-px-2
                  after:univer-absolute after:univer-right-0 after:univer-top-1/2 after:univer-block after:univer-h-4
                  after:univer-w-px after:-univer-translate-y-1/2 after:univer-bg-gray-200 after:univer-content-[""]
                `, {
                    'univer-max-w-32': isSingle,
-                    'univer-max-w-80': !isSingle,
+                    'univer-max-w-fit': !isSingle,
                })}
            >
-                <div className="univer-flex univer-gap-x-2">{renderContent}</div>
+                <div className="univer-flex univer-h-full univer-gap-x-2">{renderContent}</div>
            </div>
        )
    );
@@ -96,7 +96,7 @@
        "rxjs": "^7.8.2",
        "tailwindcss": "3.4.17",
        "typescript": "^5.9.3",
-        "vite": "^7.1.9",
+        "vite": "^7.1.10",
        "vitest": "^3.2.4"
    }
 }
@@ -89,7 +89,7 @@
        "@univerjs/network": "workspace:*",
        "rxjs": "^7.8.2",
        "typescript": "^5.9.3",
-        "vite": "^7.1.9",
+        "vite": "^7.1.10",
        "vitest": "^3.2.4"
    }
 }
@@ -85,7 +85,7 @@
        "rxjs": "^7.8.2",
        "tailwindcss": "3.4.17",
        "typescript": "^5.9.3",
-        "vite": "^7.1.9",
+        "vite": "^7.1.10",
        "vitest": "^3.2.4"
    }
 }
@@ -64,7 +64,7 @@
    "devDependencies": {
        "@univerjs-infra/shared": "workspace:*",
        "typescript": "^5.9.3",
-        "vite": "^7.1.9",
+        "vite": "^7.1.10",
        "vitest": "^3.2.4"
    }
 }
@@ -60,7 +60,7 @@
    "devDependencies": {
        "@univerjs-infra/shared": "workspace:*",
        "typescript": "^5.9.3",
-        "vite": "^7.1.9",
+        "vite": "^7.1.10",
        "vitest": "^3.2.4"
    }
 }
@@ -57,6 +57,6 @@
    },
    "devDependencies": {
        "@univerjs-infra/shared": "workspace:*",
-        "vite": "^7.1.9"
+        "vite": "^7.1.10"
    }
 }
@@ -80,7 +80,7 @@
        "rxjs": "^7.8.2",
        "tailwindcss": "3.4.17",
        "typescript": "^5.9.3",
-        "vite": "^7.1.9",
+        "vite": "^7.1.10",
        "vitest": "^3.2.4"
    }
 }
@@ -65,7 +65,7 @@
        "@univerjs-infra/shared": "workspace:*",
        "rxjs": "^7.8.2",
        "typescript": "^5.9.3",
-        "vite": "^7.1.9",
+        "vite": "^7.1.10",
        "vitest": "^3.2.4"
    }
 }
@@ -67,7 +67,7 @@
    "devDependencies": {
        "@univerjs-infra/shared": "workspace:*",
        "typescript": "^5.9.3",
-        "vite": "^7.1.9",
+        "vite": "^7.1.10",
        "vitest": "^3.2.4",
        "vue": "^3.5.22"
    }
@@ -67,7 +67,7 @@
    "devDependencies": {
        "@univerjs-infra/shared": "workspace:*",
        "typescript": "^5.9.3",
-        "vite": "^7.1.9",
+        "vite": "^7.1.10",
        "vitest": "^3.2.4"
    }
 }
@@ -98,7 +98,7 @@
        "tailwindcss": "3.4.17",
        "tailwindcss-animate": "^1.0.7",
        "typescript": "^5.9.3",
-        "vite": "^7.1.9",
+        "vite": "^7.1.10",
        "vitest": "^3.2.4"
    }
 }
@@ -83,7 +83,7 @@
        "rxjs": "^7.8.2",
        "tailwindcss": "3.4.17",
        "typescript": "^5.9.3",
-        "vite": "^7.1.9",
+        "vite": "^7.1.10",
        "vitest": "^3.2.4"
    }
 }
@@ -79,7 +79,7 @@
        "@univerjs-infra/shared": "workspace:*",
        "rxjs": "^7.8.2",
        "typescript": "^5.9.3",
-        "vite": "^7.1.9",
+        "vite": "^7.1.10",
        "vitest": "^3.2.4"
    }
 }