Skip to content

fix: truncate long project names in pinned card #525

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ussaama merged 2 commits into from
Apr 13, 2026
Merged

fix: truncate long project names in pinned card #525

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
458ab3c
fix: truncate long project names in pinned card
ussaama Apr 13, 2026
bfc0e0d
fix: update line references in localization files for PinnedProjectCard
ussaama Apr 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 30 additions & 26 deletions echo/frontend/src/components/project/PinnedProjectCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,23 +10,20 @@ import {
Text,
Tooltip,
} from "@mantine/core";
import {
IconExternalLink,
IconPinFilled,
} from "@tabler/icons-react";
import { IconExternalLink, IconPinFilled } from "@tabler/icons-react";
import { formatRelative } from "date-fns";
import { Icons } from "@/icons";
import { testId } from "@/lib/testUtils";
import { I18nLink } from "../common/i18nLink";

const LANGUAGE_LABELS: Record<string, string> = {
en: "EN",
nl: "NL",
de: "DE",
fr: "FR",
en: "EN",
es: "ES",
fr: "FR",
it: "IT",
multi: "Multi",
nl: "NL",
};

export const PinnedProjectCard = ({
Expand All @@ -44,7 +41,7 @@ export const PinnedProjectCard = ({
const conversationCount =
project.conversations_count ?? project?.conversations?.length ?? 0;
const languageLabel = project.language
? LANGUAGE_LABELS[project.language] ?? project.language.toUpperCase()
? (LANGUAGE_LABELS[project.language] ?? project.language.toUpperCase())
: null;
const ownerName = (project as any).owner_name as string | undefined;
const ownerEmail = (project as any).owner_email as string | undefined;
Expand All @@ -59,37 +56,44 @@ export const PinnedProjectCard = ({
<Stack className="h-full" justify="space-between" gap="sm">
<Stack gap="xs">
<Group justify="space-between" wrap="nowrap" align="flex-start">
<Group align="center" gap="xs" wrap="nowrap" style={{ minWidth: 0 }}>
<Icons.Calendar />
<Group
align="center"
gap="xs"
wrap="nowrap"
style={{ minWidth: 0, overflow: "hidden" }}
>
<Icons.Calendar style={{ flexShrink: 0 }} />
<Text
className="font-semibold"
size="lg"
lineClamp={1}
truncate
{...testId(`pinned-project-card-name-${project.id}`)}
>
{project.name}
</Text>
</Group>
<Group gap={4} wrap="nowrap" style={{ flexShrink: 0 }}>
{languageLabel && (
<Badge size="xs" variant="light" color="gray">
{languageLabel}
</Badge>
)}
<Tooltip label={t`Unpin project`}>
<ActionIcon
variant="subtle"
color="primary"
size="sm"
loading={isUnpinning}
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
onUnpin(project.id);
}}
>
<IconPinFilled size={16} />
</ActionIcon>
Comment on lines +82 to +94
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot Apr 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ 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.

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

<Text size="xs" c="dimmed">
Expand Down
6 changes: 3 additions & 3 deletions echo/frontend/src/locales/de-DE.po
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -299,7 +299,7 @@ msgid "{0} views"
msgstr "{0} Aufrufe"

#. placeholder {0}: formatRelative( new Date(project.updated_at ?? new Date()), new Date(), )
#: src/components/project/PinnedProjectCard.tsx:96
#: src/components/project/PinnedProjectCard.tsx:100
msgid "{conversationCount} Conversations • Edited {0}"
msgstr "{conversationCount} Gespräche • Bearbeitet {0}"

Expand Down Expand Up @@ -3594,7 +3594,7 @@ msgstr "Ups! Es scheint, dass der Mikrofonzugriff verweigert wurde. Keine Sorge!
#~ msgstr "Ups! Es scheint, dass der Mikrofonzugriff verweigert wurde. Keine Sorge! Wir haben einen praktischen Fehlerbehebungsleitfaden für Sie. Schauen Sie ihn sich an. Sobald Sie das Problem behoben haben, kommen Sie zurück und besuchen Sie diese Seite erneut, um zu überprüfen, ob Ihr Mikrofon bereit ist."

#: src/components/project/ProjectCard.tsx:60
#: src/components/project/PinnedProjectCard.tsx:134
#: src/components/project/PinnedProjectCard.tsx:138
#: src/components/aspect/AspectCard.tsx:45
msgid "Open"
msgstr "Öffnen"
Expand Down Expand Up @@ -5946,7 +5946,7 @@ msgstr "Löse zuerst ein Projekt (max. 3)"
#~ msgstr "Von Chatleiste loslösen"

#: src/components/project/ProjectListItem.tsx:104
#: src/components/project/PinnedProjectCard.tsx:78
#: src/components/project/PinnedProjectCard.tsx:81
msgid "Unpin project"
msgstr "Projekt lösen"

Expand Down
6 changes: 3 additions & 3 deletions echo/frontend/src/locales/en-US.po
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -481,7 +481,7 @@ msgid "{0} views"
msgstr "{0} views"

#. placeholder {0}: formatRelative( new Date(project.updated_at ?? new Date()), new Date(), )
#: src/components/project/PinnedProjectCard.tsx:96
#: src/components/project/PinnedProjectCard.tsx:100
msgid "{conversationCount} Conversations • Edited {0}"
msgstr "{conversationCount} Conversations • Edited {0}"

Expand Down Expand Up @@ -3896,7 +3896,7 @@ msgstr "Oops! It looks like microphone access was denied. No worries, though! We
#~ msgstr "Oops! It looks like microphone access was denied. No worries, though! We've got a handy troubleshooting guide for you. Feel free to check it out. Once you've resolved the issue, come back and visit this page again to check if your microphone is ready."

#: src/components/project/ProjectCard.tsx:60
#: src/components/project/PinnedProjectCard.tsx:134
#: src/components/project/PinnedProjectCard.tsx:138
#: src/components/aspect/AspectCard.tsx:45
msgid "Open"
msgstr "Open"
Expand Down Expand Up @@ -6257,7 +6257,7 @@ msgstr "Unpin a project first (max 3)"
#~ msgstr "Unpin from chat bar"

#: src/components/project/ProjectListItem.tsx:104
#: src/components/project/PinnedProjectCard.tsx:78
#: src/components/project/PinnedProjectCard.tsx:81
msgid "Unpin project"
msgstr "Unpin project"

Expand Down
6 changes: 3 additions & 3 deletions echo/frontend/src/locales/es-ES.po
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -299,7 +299,7 @@ msgid "{0} views"
msgstr "{0} vistas"

#. placeholder {0}: formatRelative( new Date(project.updated_at ?? new Date()), new Date(), )
#: src/components/project/PinnedProjectCard.tsx:96
#: src/components/project/PinnedProjectCard.tsx:100
msgid "{conversationCount} Conversations • Edited {0}"
msgstr "{conversationCount} conversaciones • Editado {0}"

Expand Down Expand Up @@ -3597,7 +3597,7 @@ msgstr "¡Ups! Parece que se denegó el acceso al micrófono. ¡No te preocupes!
#~ msgstr "¡Ups! Parece que se denegó el acceso al micrófono. ¡No te preocupes! Tenemos una guía de solución de problemas para ti. Siéntete libre de consultarla. Una vez que hayas resuelto el problema, vuelve a visitar esta página para verificar si tu micrófono está listo."

#: src/components/project/ProjectCard.tsx:60
#: src/components/project/PinnedProjectCard.tsx:134
#: src/components/project/PinnedProjectCard.tsx:138
#: src/components/aspect/AspectCard.tsx:45
msgid "Open"
msgstr "Abrir"
Expand Down Expand Up @@ -5950,7 +5950,7 @@ msgstr "Desancla primero un proyecto (máx. 3)"
#~ msgstr "Desfijar de la barra de chat"

#: src/components/project/ProjectListItem.tsx:104
#: src/components/project/PinnedProjectCard.tsx:78
#: src/components/project/PinnedProjectCard.tsx:81
msgid "Unpin project"
msgstr "Desanclar proyecto"

Expand Down
6 changes: 3 additions & 3 deletions echo/frontend/src/locales/fr-FR.po
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -314,7 +314,7 @@ msgid "{0} views"
msgstr "{0} vues"

#. placeholder {0}: formatRelative( new Date(project.updated_at ?? new Date()), new Date(), )
#: src/components/project/PinnedProjectCard.tsx:96
#: src/components/project/PinnedProjectCard.tsx:100
msgid "{conversationCount} Conversations • Edited {0}"
msgstr "{conversationCount} conversations • Modifié {0}"

Expand Down Expand Up @@ -3612,7 +3612,7 @@ msgstr "Il semble que l'accès au microphone ait été refusé. Pas d'inquiétud
#~ msgstr "Oups ! Il semble que l'accès au microphone ait été refusé. Pas d'inquiétude ! Nous avons un guide de dépannage pratique pour vous. N'hésitez pas à le consulter. Une fois le problème résolu, revenez sur cette page pour vérifier si votre microphone est prêt."

#: src/components/project/ProjectCard.tsx:60
#: src/components/project/PinnedProjectCard.tsx:134
#: src/components/project/PinnedProjectCard.tsx:138
#: src/components/aspect/AspectCard.tsx:45
msgid "Open"
msgstr "Ouvrir"
Expand Down Expand Up @@ -5965,7 +5965,7 @@ msgstr "Désépinglez d'abord un projet (max 3)"
#~ msgstr "Détacher de la barre de chat"

#: src/components/project/ProjectListItem.tsx:104
#: src/components/project/PinnedProjectCard.tsx:78
#: src/components/project/PinnedProjectCard.tsx:81
msgid "Unpin project"
msgstr "Désépingler le projet"

Expand Down
6 changes: 3 additions & 3 deletions echo/frontend/src/locales/it-IT.po
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -481,7 +481,7 @@ msgid "{0} views"
msgstr "{0} views"

#. placeholder {0}: formatRelative( new Date(project.updated_at ?? new Date()), new Date(), )
#: src/components/project/PinnedProjectCard.tsx:96
#: src/components/project/PinnedProjectCard.tsx:100
msgid "{conversationCount} Conversations • Edited {0}"
msgstr "{conversationCount} Conversations • Edited {0}"

Expand Down Expand Up @@ -3896,7 +3896,7 @@ msgstr "Oops! It looks like microphone access was denied. No worries, though! We
#~ msgstr "Oops! It looks like microphone access was denied. No worries, though! We've got a handy troubleshooting guide for you. Feel free to check it out. Once you've resolved the issue, come back and visit this page again to check if your microphone is ready."

#: src/components/project/ProjectCard.tsx:60
#: src/components/project/PinnedProjectCard.tsx:134
#: src/components/project/PinnedProjectCard.tsx:138
#: src/components/aspect/AspectCard.tsx:45
msgid "Open"
msgstr "Open"
Expand Down Expand Up @@ -6257,7 +6257,7 @@ msgstr "Unpin a project first (max 3)"
#~ msgstr "Unpin from chat bar"

#: src/components/project/ProjectListItem.tsx:104
#: src/components/project/PinnedProjectCard.tsx:78
#: src/components/project/PinnedProjectCard.tsx:81
msgid "Unpin project"
msgstr "Unpin project"

Expand Down
6 changes: 3 additions & 3 deletions echo/frontend/src/locales/nl-NL.po
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -299,7 +299,7 @@ msgid "{0} views"
msgstr "{0} weergaven"

#. placeholder {0}: formatRelative( new Date(project.updated_at ?? new Date()), new Date(), )
#: src/components/project/PinnedProjectCard.tsx:96
#: src/components/project/PinnedProjectCard.tsx:100
msgid "{conversationCount} Conversations • Edited {0}"
msgstr "{conversationCount} gesprekken • Bewerkt {0}"

Expand Down Expand Up @@ -3720,7 +3720,7 @@ msgstr "Het lijkt erop dat toegang tot de microfoon geweigerd is. Geen zorgen, w
#~ msgstr "Oeps! Het lijkt erop dat toegang tot de microfoon geweigerd is. Geen zorgen, we hebben een handige probleemoplossingsgids voor je. Voel je vrij om deze te bekijken. Zodra je het probleem hebt opgelost, kom dan terug naar deze pagina om te controleren of je microfoon klaar is voor gebruik."

#: src/components/project/ProjectCard.tsx:60
#: src/components/project/PinnedProjectCard.tsx:134
#: src/components/project/PinnedProjectCard.tsx:138
#: src/components/aspect/AspectCard.tsx:45
msgid "Open"
msgstr "Openen"
Expand Down Expand Up @@ -6129,7 +6129,7 @@ msgstr "Maak eerst een project los (max 3)"
#~ msgstr "Losmaken van chatbalk"

#: src/components/project/ProjectListItem.tsx:104
#: src/components/project/PinnedProjectCard.tsx:78
#: src/components/project/PinnedProjectCard.tsx:81
msgid "Unpin project"
msgstr "Project losmaken"

Expand Down
6 changes: 3 additions & 3 deletions echo/frontend/src/locales/uk-UA.po
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -481,7 +481,7 @@ msgid "{0} views"
msgstr "{0} views"

#. placeholder {0}: formatRelative( new Date(project.updated_at ?? new Date()), new Date(), )
#: src/components/project/PinnedProjectCard.tsx:96
#: src/components/project/PinnedProjectCard.tsx:100
msgid "{conversationCount} Conversations • Edited {0}"
msgstr "{conversationCount} Conversations • Edited {0}"

Expand Down Expand Up @@ -3896,7 +3896,7 @@ msgstr "Oops! It looks like microphone access was denied. No worries, though! We
#~ msgstr "Oops! It looks like microphone access was denied. No worries, though! We've got a handy troubleshooting guide for you. Feel free to check it out. Once you've resolved the issue, come back and visit this page again to check if your microphone is ready."

#: src/components/project/ProjectCard.tsx:60
#: src/components/project/PinnedProjectCard.tsx:134
#: src/components/project/PinnedProjectCard.tsx:138
#: src/components/aspect/AspectCard.tsx:45
msgid "Open"
msgstr "Open"
Expand Down Expand Up @@ -6257,7 +6257,7 @@ msgstr "Unpin a project first (max 3)"
#~ msgstr "Unpin from chat bar"

#: src/components/project/ProjectListItem.tsx:104
#: src/components/project/PinnedProjectCard.tsx:78
#: src/components/project/PinnedProjectCard.tsx:81
msgid "Unpin project"
msgstr "Unpin project"

Expand Down
Loading