Fix headings styles in hint block

[clairechabas]

The break-words property is set on the hint content container which works for paragraphs but doesn't work for headings because headings include 2 children: the heading text and their hash link button.

Fix:

• Updates heading block to break-words so a heading always adapts to its container's width.
• Adapts hint blocks heading right padding to leave enough room for the hash link button in multiple lines headings.
• Fix heading container width to spread on the full-width of the hint block.

Preview

2 hints with headings of different lengths

hint heading hash button for multiple lines headings

hint heading hash button for a single line heading

[linear]

RND-7705 Hint block doesn't wrap on published site

[changeset-bot]

🦋 Changeset detected

Latest commit: 2282178

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
gitbook	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

Summary of the deployments:

Version	URL	Status
Vercel	https://gitbook-v2-mza0k6sah-gitbook.vercel.app	✅
Cloudflare	https://3c0acbb1-gitbook-open-v2-preview.gitbook.workers.dev	✅

Test content

Site	2v	2c
GitBook	https://gitbook-v2-mza0k6sah-gitbook.vercel.app/url/gitbook.com/docs	https://3c0acbb1-gitbook-open-v2-preview.gitbook.workers.dev/url/gitbook.com/docs
E2E	https://gitbook-v2-mza0k6sah-gitbook.vercel.app/url/gitbook.gitbook.io/test-gitbook-open	https://3c0acbb1-gitbook-open-v2-preview.gitbook.workers.dev/url/gitbook.gitbook.io/test-gitbook-open

[argos-ci]

The latest updates on your projects. Learn more about Argos notifications ↗︎

Build	Status	Details	Updated (UTC)
customers-v2 (Inspect)	✅ No changes detected	-	Jul 23, 2025, 1:23 PM
v2-cloudflare (Inspect)	✅ No changes detected	-	Jul 23, 2025, 1:29 PM
v2-vercel (Inspect)	✅ No changes detected	-	Jul 23, 2025, 1:28 PM

[gregberge]

@clairechabas ask @zenoachtig if the heading should be full-width or not.

[clairechabas]

@gregberge I checked our docs for this because I wasn't sure either, and it's not full-width there (see here). So it looks to be by design.
But @zenoachtig if you'd rather change it let me know.

[zenoachtig]

@gregberge I checked our docs for this because I wasn't sure either, and it's not full-width there (see here). So it looks to be by design. But @zenoachtig if you'd rather change it let me know.

Oh no that looks like a bug – the heading "bar" should span the complete width!

[gregberge]

@zenoachtig @clairechabas That's what I thought, @Claire can you fix it at the same time?

[clairechabas]

Yep it's fixed 👍 Thanks for confirming @zenoachtig!