From 004fcc8e800666e87f62092782b9b3c9525d99e9 Mon Sep 17 00:00:00 2001
From: JimmFly <yangjinfei001@gmail.com>
Date: Mon, 29 May 2023 18:39:47 +0800
Subject: [PATCH] fix: updater button text overflow (#2571)

---
 .../app-updater-button/index.css.ts            |  5 +++++
 .../app-sidebar/app-updater-button/index.tsx   | 18 +++++++++++++-----
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/packages/component/src/components/app-sidebar/app-updater-button/index.css.ts b/packages/component/src/components/app-sidebar/app-updater-button/index.css.ts
index 95b4f5530d..b5d3da7836 100644
--- a/packages/component/src/components/app-sidebar/app-updater-button/index.css.ts
+++ b/packages/component/src/components/app-sidebar/app-updater-button/index.css.ts
@@ -135,6 +135,11 @@ export const whatsNewLabel = style({
   fontSize: 'var(--affine-font-sm)',
   whiteSpace: 'nowrap',
 });
+export const ellipsisTextOverflow = style({
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+});
 
 export const progress = style({
   position: 'relative',
diff --git a/packages/component/src/components/app-sidebar/app-updater-button/index.tsx b/packages/component/src/components/app-sidebar/app-updater-button/index.tsx
index cc0eedf059..ba343afbb4 100644
--- a/packages/component/src/components/app-sidebar/app-updater-button/index.tsx
+++ b/packages/component/src/components/app-sidebar/app-updater-button/index.tsx
@@ -106,7 +106,7 @@ export function AppUpdaterButton({ className, style }: AddPageButtonProps) {
     return (
       <div className={clsx([styles.updateAvailableWrapper])}>
         <div className={clsx([styles.installLabelNormal])}>
-          <span>
+          <span className={styles.ellipsisTextOverflow}>
             {!updateReady
               ? t['com.affine.updater.downloading']()
               : t['com.affine.updater.update-available']()}
@@ -119,7 +119,9 @@ export function AppUpdaterButton({ className, style }: AddPageButtonProps) {
         {updateReady ? (
           <div className={clsx([styles.installLabelHover])}>
             <ResetIcon className={styles.icon} />
-            <span>{t['com.affine.updater.restart-to-update']()}</span>
+            <span className={styles.ellipsisTextOverflow}>
+              {t['com.affine.updater.restart-to-update']()}
+            </span>
           </div>
         ) : (
           <div className={styles.progress}>
@@ -137,14 +139,18 @@ export function AppUpdaterButton({ className, style }: AddPageButtonProps) {
     return (
       <>
         <div className={clsx([styles.installLabelNormal])}>
-          <span>{t['com.affine.updater.update-available']()}</span>
+          <span className={styles.ellipsisTextOverflow}>
+            {t['com.affine.updater.update-available']()}
+          </span>
           <span className={styles.versionLabel}>
             {updateAvailable?.version}
           </span>
         </div>
 
         <div className={clsx([styles.installLabelHover])}>
-          <span>{t['com.affine.updater.open-download-page']()}</span>
+          <span className={styles.ellipsisTextOverflow}>
+            {t['com.affine.updater.open-download-page']()}
+          </span>
         </div>
       </>
     );
@@ -155,7 +161,9 @@ export function AppUpdaterButton({ className, style }: AddPageButtonProps) {
       <>
         <div className={clsx([styles.whatsNewLabel])}>
           <NewIcon className={styles.icon} />
-          <span>{t[`Discover what's new!`]()}</span>
+          <span className={styles.ellipsisTextOverflow}>
+            {t[`Discover what's new!`]()}
+          </span>
         </div>
         <div
           className={styles.closeIcon}