feat(canisters): allow canister names up to 64 characters

[yhabib]

Motivation

The backend accepts canister names up to 64 characters since #8012. The frontend still validates against the old 24-character limit. A 64-character name can also be one long word, so the detail page and the top-up confirm screen need a wrap rule for it.

Changes

• Raised MAX_CANISTER_NAME_LENGTH from 24 to 64.
• Updated the error__canister.name_too_long message to state 64 characters.
• Added overflow-wrap: anywhere to the canister heading title, the heading subtitle, and the name on the cycles confirm screen.
• Updated the tests that hardcoded the old limit in names and messages.

---

Prev. #8012

[zeropath-ai]

✅ No security or compliance issues detected. Reviewed everything up to 3d101e4.

Security Overview

• 🔎 Scanned files: 12 changed file(s)
• 🔗 Scan Link: https://zeropath.com/app/repositories/c216d0ec-7005-4385-92fb-ac6c6dd345b7?scanId=f545d7c4-2656-4ef1-a961-047753abdc8f&codeScanTypes=PrScan&tab=issues

Detected Code Changes

Change Type	Relevant files
Enhancement	► frontend/src/lib/api/canisters.api.ts     Add $max to CanisterNameTooLongError payload ► frontend/src/lib/canisters/nns-dapp/nns-dapp.canister.ts     Pass $max to CanisterNameTooLongError in responses ► frontend/src/lib/components/canister-detail/CanisterHeadingTitle.svelte     Enable overflow-wrap: anywhere for long canister names
Enhancement	► frontend/src/lib/components/canister-detail/CanisterPageHeading.svelte     Break long canister names in subtitle (breakLongWords)
Enhancement	► frontend/src/lib/components/canisters/ConfirmCyclesCanister.svelte     Show canister name with overflow-wrap: anywhere and right alignment in value
Enhancement	► frontend/src/lib/components/common/HeadingSubtitle.svelte     Add breakLongWords prop to enable long-word wrapping in subtitle
Enhancement	► frontend/src/lib/constants/canisters.constants.ts     Increase MAX_CANISTER_NAME_LENGTH from 24 to 64
Enhancement	► frontend/src/lib/i18n/en.json     name_too_long message now uses $max placeholder instead of fixed value 24
Bug Fix	► frontend/src/tests/lib/api/canisters.api.spec.ts     Update tests to expect dynamic $max in CanisterNameTooLongError payload
Enhancement	► frontend/src/tests/lib/modals/canisters/LinkCanisterModal.spec.ts     Update test to reflect new max length in error text
Enhancement	► frontend/src/tests/lib/modals/canisters/RenameCanisterModal.spec.ts     Update test description to reference new maximum length
Enhancement	► frontend/src/tests/lib/utils/canisters.utils.spec.ts     Update expectations to use dynamic MAX_CANISTER_NAME_LENGTH in error message

[Copilot]

Pull request overview

Updates the frontend to match the backend’s 64-character canister-name limit, including UI tweaks to safely display long single-word names and aligning related tests/messages.

Changes:

• Increased MAX_CANISTER_NAME_LENGTH from 24 to 64 and updated validation-related copy.
• Added overflow-wrap: anywhere to canister heading title/subtitle and the cycles top-up confirm screen name display.
• Updated tests to reflect the new length limit and updated error text.

Reviewed changes

Copilot reviewed 8 out of 8 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
frontend/src/lib/constants/canisters.constants.ts	Raises max canister name length constant to 64.
frontend/src/lib/i18n/en.json	Updates canister “name too long” translation to mention 64.
frontend/src/lib/components/common/HeadingSubtitle.svelte	Adds overflow-wrap: anywhere in shared subtitle component.
frontend/src/lib/components/canisters/ConfirmCyclesCanister.svelte	Wraps/aligns canister name on cycles confirm screen.
frontend/src/lib/components/canister-detail/CanisterHeadingTitle.svelte	Adds wrapping rule for long canister names in heading title.
frontend/src/tests/lib/utils/canisters.utils.spec.ts	Updates expected “too long” error message to 64.
frontend/src/tests/lib/modals/canisters/RenameCanisterModal.spec.ts	Updates test description to no longer hardcode “24 characters”.
frontend/src/tests/lib/modals/canisters/LinkCanisterModal.spec.ts	Updates expected “too long” error message to 64.

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[Copilot]

🟢 Approved

The changes consistently update the max-length constraint, error parameterization, UI wrapping behavior, and the associated test expectations without introducing incomplete call sites or mismatched i18n substitutions.

Review details

• Files reviewed: 12/12 changed files
• Comments generated: 0 new
• Review effort level: Lite