From 15a7e93058f13ef0e8634fcdc50273697b88f17c Mon Sep 17 00:00:00 2001
From: JimmFly <yangjinfei001@gmail.com>
Date: Wed, 26 Apr 2023 00:40:14 +0800
Subject: [PATCH] fix: text overflow problem in <a> tag (#2126)

---
 .../components/pure/workspace-slider-bar/index.tsx |  2 +-
 .../pure/workspace-slider-bar/shared-styles.ts     |  3 ++-
 .../components/pure/workspace-slider-bar/style.ts  | 14 +++++++++++++-
 3 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/components/pure/workspace-slider-bar/index.tsx b/apps/web/src/components/pure/workspace-slider-bar/index.tsx
index dc5f18e37d..300b3ceb98 100644
--- a/apps/web/src/components/pure/workspace-slider-bar/index.tsx
+++ b/apps/web/src/components/pure/workspace-slider-bar/index.tsx
@@ -165,7 +165,7 @@ export const WorkSpaceSliderBar: React.FC<WorkSpaceSliderBarProps> = ({
                 }}
               >
                 <SettingsIcon />
-                {t('Workspace Settings')}
+                <div>{t('Workspace Settings')}</div>
               </StyledLink>
             </StyledListItem>
             <StyledListItem
diff --git a/apps/web/src/components/pure/workspace-slider-bar/shared-styles.ts b/apps/web/src/components/pure/workspace-slider-bar/shared-styles.ts
index e79f4df47a..53a864ab5d 100644
--- a/apps/web/src/components/pure/workspace-slider-bar/shared-styles.ts
+++ b/apps/web/src/components/pure/workspace-slider-bar/shared-styles.ts
@@ -9,7 +9,8 @@ export const StyledListItem = styled('div')<{
     color: active
       ? 'var(--affine-primary-color)'
       : 'var(--affine-text-primary-color)',
-    padding: '0 16px',
+    paddingLeft: '16px',
+    paddingRight: '2px',
     borderRadius: '8px',
     cursor: 'pointer',
     marginBottom: '4px',
diff --git a/apps/web/src/components/pure/workspace-slider-bar/style.ts b/apps/web/src/components/pure/workspace-slider-bar/style.ts
index f2b41e99da..d340d7db12 100644
--- a/apps/web/src/components/pure/workspace-slider-bar/style.ts
+++ b/apps/web/src/components/pure/workspace-slider-bar/style.ts
@@ -1,4 +1,9 @@
-import { baseTheme, displayFlex, styled } from '@affine/component';
+import {
+  baseTheme,
+  displayFlex,
+  styled,
+  textEllipsis,
+} from '@affine/component';
 import Link from 'next/link';
 
 const macosElectron = environment.isDesktop && environment.isMacOs;
@@ -71,6 +76,13 @@ export const StyledLink = styled(Link)(() => {
     ':visited': {
       color: 'inherit',
     },
+    overflow: 'hidden',
+    div: {
+      wordBreak: 'break-all',
+      wordWrap: 'break-word',
+      whiteSpace: 'nowrap',
+      ...textEllipsis(1),
+    },
     userDrag: 'none',
     userSelect: 'none',
     appRegion: 'no-drag',