fix: truncate long project names in pinned card

[ussaama]

Summary by CodeRabbit

Release Notes

• Style

  • Refined pinned project card layout and styling for improved visual consistency.
  • Enhanced text truncation behavior in project names.

• Refactor

  • Reorganized pinned project card component structure and element positioning for better maintainability.

[coderabbitai]

Walkthrough

The pull request refactors the PinnedProjectCard component's layout and styling, restructuring the unpin button tooltip into a dedicated flex group and adjusting calendar icon styling and text truncation props. All corresponding localization files have source line references updated to reflect the new component line numbers, with no translation content changes.

Changes

Cohort / File(s)	Summary
Component Layout & Styling echo/frontend/src/components/project/PinnedProjectCard.tsx	Restructured header layout with flexbox adjustments: replaced minWidth: 0 with overflow: "hidden", converted calendar icon to use flexShrink: 0, changed project name from lineClamp={1} to truncate prop, and moved unpin tooltip/action icon into a dedicated Group with flex properties. Minor formatting adjustment to languageLabel assignment and reordering of LANGUAGE_LABELS mapping.
Localization References echo/frontend/src/locales/de-DE.po, en-US.po, es-ES.po, fr-FR.po, it-IT.po, nl-NL.po, uk-UA.po	Updated source line reference metadata for three UI strings in PinnedProjectCard.tsx across all seven locale files: conversational count message (line 96→100), "Open" action (134→138), and "Unpin project" (78→81). Translation content unchanged.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Suggested labels

improvement

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: fixing truncation of long project names in the pinned card component.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/pinned-project-card-long-name-truncation

---

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

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@echo/frontend/src/components/project/PinnedProjectCard.tsx`:
- Around line 82-94: The ActionIcon used as the icon-only unpin control
(ActionIcon with IconPinFilled and onUnpin) lacks an accessible name; add an
explicit accessible label by passing a descriptive prop such as
aria-label="Unpin project" (or aria-labelledby pointing to a visible label) to
the ActionIcon so screen readers can announce the control, and keep existing
onClick, loading, and event-prevention logic unchanged.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: 4aed1d64-3623-4f7f-b62b-46686a5f4e4f

📥 Commits

Reviewing files that changed from the base of the PR and between 5b20b4e and bfc0e0d.

📒 Files selected for processing (8)

• echo/frontend/src/components/project/PinnedProjectCard.tsx
• echo/frontend/src/locales/de-DE.po
• echo/frontend/src/locales/en-US.po
• echo/frontend/src/locales/es-ES.po
• echo/frontend/src/locales/fr-FR.po
• echo/frontend/src/locales/it-IT.po
• echo/frontend/src/locales/nl-NL.po
• echo/frontend/src/locales/uk-UA.po

[coderabbitai]

⚠️ Potential issue | 🟠 Major

Add an accessible name to the icon-only unpin control.

At Line 82, the ActionIcon is icon-only and currently has no explicit accessible name. Tooltip text is not a reliable accessible label for all assistive tech paths.

⚡ Suggested fix

 							<Tooltip label={t`Unpin project`}>
 								<ActionIcon
+									aria-label={t`Unpin project`}
 									variant="subtle"
 									color="primary"
 									size="sm"
 									loading={isUnpinning}

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

	<ActionIcon
	variant="subtle"
	color="primary"
	size="sm"
	loading={isUnpinning}
	onClick={(e) => {
	e.preventDefault();
	e.stopPropagation();
	onUnpin(project.id);
	}}
	>
	<IconPinFilled size={16} />
	</ActionIcon>
	<Tooltip label={t`Unpin project`}>
	<ActionIcon
	aria-label={t`Unpin project`}
	variant="subtle"
	color="primary"
	size="sm"
	loading={isUnpinning}
	onClick={(e) => {
	e.preventDefault();
	e.stopPropagation();
	onUnpin(project.id);
	}}
	>
	<IconPinFilled size={16} />
	</ActionIcon>
	</Tooltip>

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@echo/frontend/src/components/project/PinnedProjectCard.tsx` around lines 82 -
94, The ActionIcon used as the icon-only unpin control (ActionIcon with
IconPinFilled and onUnpin) lacks an accessible name; add an explicit accessible
label by passing a descriptive prop such as aria-label="Unpin project" (or
aria-labelledby pointing to a visible label) to the ActionIcon so screen readers
can announce the control, and keep existing onClick, loading, and
event-prevention logic unchanged.