diff --git a/src/app/(loading-group)/[organizationSlug]/projects/[projectSlug]/page.tsx b/src/app/(loading-group)/[organizationSlug]/projects/[projectSlug]/page.tsx index f93afaf7..d58de978 100644 --- a/src/app/(loading-group)/[organizationSlug]/projects/[projectSlug]/page.tsx +++ b/src/app/(loading-group)/[organizationSlug]/projects/[projectSlug]/page.tsx @@ -43,6 +43,7 @@ import SubgroupsAndAssetsList, { checkType, } from "@/components/SubgroupsAndAssetsList"; import { useAutoTour } from "@/hooks/useAutoTour"; +import { truncateEnd } from "@/utils/common"; export default function RepositoriesPage() { const [viewedProject, setViewedProject] = useState<"active" | "inactive">( @@ -90,6 +91,7 @@ export default function RepositoriesPage() { const [showProjectModal, setShowProjectModal] = useState(false); const projectMenu = useProjectMenu(); + const truncatedProjectName = truncateEnd(project.name, 65); // a filtered list that comes back empty means "no matches", not "nothing created yet", // so the inline create form is only offered on the unfiltered, genuinely empty group @@ -263,10 +265,10 @@ export default function RepositoriesPage() { } primaryHeadline description={ - "Repositories managed by the " + project.name + " group." + "Repositories managed by the " + truncatedProjectName + " group." } forceVertical - title={project.name} + title={truncatedProjectName} > {!showInlineCreateForm && ( <> diff --git a/src/utils/common.ts b/src/utils/common.ts index f88ae5c8..1a78cbde 100644 --- a/src/utils/common.ts +++ b/src/utils/common.ts @@ -313,6 +313,12 @@ export const truncateMiddle = ( return text.slice(0, start) + "..." + text.slice(-end); }; +export const truncateEnd = (text: string, maxLength: number = 50): string => { + if (text.length <= maxLength) return text; + + return text.slice(0, maxLength) + "..."; +}; + export const formatPurlQualifiers = (purl: string, maxLength = 48) => truncateMiddle(extractPurlQualifiers(purl), maxLength);