Skip to content

Commit 726b53b

Browse files
committed
Show ellpisis on long title - Resolve velopert#73
1 parent 08e959c commit 726b53b

File tree

1 file changed

+8
-1
lines changed

1 file changed

+8
-1
lines changed

src/components/base/HeaderLogo.tsx

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { UserLogo } from '../../modules/header';
66
import palette from '../../lib/styles/palette';
77
import { createFallbackTitle } from '../../lib/utils';
88
import media from '../../lib/styles/media';
9+
import { ellipsis } from '../../lib/styles/utils';
910

1011
export interface HeaderLogoProps {
1112
custom: boolean;
@@ -35,7 +36,7 @@ const HeaderLogo: React.FC<HeaderLogoProps> = ({
3536
<VelogLogoLink to="/">
3637
<VelogIcon />
3738
</VelogLogoLink>
38-
<Link to={velogPath}>
39+
<Link to={velogPath} className="user-logo">
3940
{userLogo.title || createFallbackTitle(username)}
4041
</Link>
4142
</HeaderLogoBlock>
@@ -65,6 +66,12 @@ const HeaderLogoBlock = styled.div`
6566
color: inherit;
6667
text-decoration: none;
6768
}
69+
70+
.user-logo {
71+
display: block;
72+
max-width: calc(100vw - 200px);
73+
${ellipsis};
74+
}
6875
`;
6976

7077
const VelogLogoLink = styled(Link)`

0 commit comments

Comments
 (0)