fix: text overflow problem in <a> tag (#2126)

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

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',

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',