Truncate website title on website list & website details pages

This commit is contained in:
Sophia Willows 2022-02-20 14:32:54 +13:00
parent 07e782ca39
commit 74e1139072
No known key found for this signature in database
GPG Key ID: E8D91D5F808FA2EC
2 changed files with 18 additions and 5 deletions

View File

@ -1,6 +1,7 @@
import React from 'react';
import { FormattedMessage } from 'react-intl';
import Link from 'components/common/Link';
import OverflowText from 'components/common/OverflowText';
import PageHeader from 'components/layout/PageHeader';
import RefreshButton from 'components/common/RefreshButton';
import ButtonLayout from 'components/layout/ButtonLayout';
@ -13,15 +14,19 @@ export default function WebsiteHeader({ websiteId, title, domain, showLink = fal
const header = showLink ? (
<>
<Favicon domain={domain} />
<Link href="/website/[...id]" as={`/website/${websiteId}/${title}`}>
{title}
<Link
className={styles.titleLink}
href="/website/[...id]"
as={`/website/${websiteId}/${title}`}
>
<OverflowText tooltipId={`${websiteId}-title`}>{title}</OverflowText>
</Link>
</>
) : (
<div>
<>
<Favicon domain={domain} />
{title}
</div>
<OverflowText tooltipId={`${websiteId}-title`}>{title}</OverflowText>
</>
);
return (

View File

@ -2,6 +2,14 @@
color: var(--gray900);
font-size: var(--font-size-large);
line-height: var(--font-size-large);
align-items: center;
display: flex;
max-width: 100%;
overflow: hidden;
}
.titleLink {
max-width: 100%;
}
.link {