feat(ui): improve text overflow handling in breadcrumbs

[tchoumi313]

…e remaining text

Summary by CodeRabbit

• New Features

  • Added tooltips to breadcrumb items, showing the full, translated label on hover.

• Style

  • Improved overflow handling in breadcrumbs by using ellipsis for long labels to ensure consistent truncation and cleaner layout.

[coderabbitai]

Walkthrough

Updated Breadcrumbs.svelte to use text-ellipsis for overflow styling and added title attributes with translated labels to crumb elements (last item, link, and non-link variants). Rendering logic and event handling remain unchanged; no public API changes.

Changes

Cohort / File(s)	Summary
Breadcrumbs UI tweaks frontend/src/lib/components/Breadcrumbs/Breadcrumbs.svelte	Replaced truncation classes with text-ellipsis on crumb elements and added title attributes using safeTranslate(c.label) for tooltips on last, link, and non-link crumbs. Structure and behavior unchanged.

Sequence Diagram(s)

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

I hop along the trail of crumbs so neat,
With ellipses soft beneath my feet.
Titles whisper tooltips, clear and bright,
Each label translated, set just right.
A tidy path, no logic fuss—
Breadcrumbs trimmed, no extra muss. 🥕

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.
Title Check	✅ Passed	The title concisely and accurately summarizes the main change in the pull request by indicating the improvement of text overflow handling for breadcrumb items using CSS ellipsis. It follows the conventional commit prefix and clearly conveys the primary feature enhancement without extraneous detail.

✨ Finishing touches

• 📝 Generate Docstrings

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/cut-absurdly-long-breadcrumb-text-with-css-properties

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 74bf380 and e9213ec.

📒 Files selected for processing (1)

• frontend/src/lib/components/Breadcrumbs/Breadcrumbs.svelte (3 hunks)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (6)

• GitHub Check: build_enterprise_frontend
• GitHub Check: build_community_frontend
• GitHub Check: startup-docker-compose-test
• GitHub Check: enterprise-startup-docker-compose-test
• GitHub Check: startup-functional-test (3.12)
• GitHub Check: enterprise-startup-functional-test (3.12)

[coderabbitai]

⚠️ Potential issue | 🟠 Major

Restore whitespace-nowrap so ellipsis actually shows.

Replacing Tailwind’s truncate helper removed the implicit whitespace-nowrap. On these two <span> branches we now set overflow-hidden + text-ellipsis without preventing wrapping, so long labels will wrap onto a second line instead of being trimmed, defeating the PR’s goal. Please add whitespace-nowrap back to both span class lists.

-				class="max-w-[64ch] overflow-hidden text-ellipsis text-sm text-gray-500 font-semibold antialiased"
+				class="max-w-[64ch] overflow-hidden whitespace-nowrap text-ellipsis text-sm text-gray-500 font-semibold antialiased"
@@
-					<span
-						class="max-w-[64ch] overflow-hidden text-ellipsis text-sm text-gray-500 font-semibold antialiased"
+					<span
+						class="max-w-[64ch] overflow-hidden whitespace-nowrap text-ellipsis text-sm text-gray-500 font-semibold antialiased"

Also applies to: 81-84

🤖 Prompt for AI Agents

In frontend/src/lib/components/Breadcrumbs/Breadcrumbs.svelte around lines 55-58
(and also apply the same change to lines 81-84), the span class lists include
overflow-hidden and text-ellipsis but no whitespace-nowrap, so long labels wrap
instead of being truncated; add the Tailwind class whitespace-nowrap to both
span class attributes so the ellipsis behavior works as intended and long labels
stay on a single truncated line.

[tchoumi313]