From 3ace8d3942191571a804e368dbf35a2b840ac721 Mon Sep 17 00:00:00 2001
From: YaelAnaya <yael.anaya@uabc.edu.mx>
Date: Mon, 24 Aug 2026 14:20:27 -0700
Subject: [PATCH] fix(ui-core): a long project description clamps instead of
 stretching its row

The description column is narrow and its content is free text, so a long one
wrapped a word-fragment per line and took the row to roughly five hundred pixels
- one project pushing every other one off the screen. At a narrow width it reads
worse than it sounds: the table scrolls sideways there, so the column is out of
view and what is left is a tall empty row with nothing in it to explain itself.

Two lines and an ellipsis, with the full text on the element's `title` and the
project's own page carrying it in full. A description is a label here, and a label
may truncate where its value is available elsewhere; the name beside it is not
clamped, because that one is what the row is for.

Found by pointing the responsive sweep at a project named and described at 116
characters rather than at the fixtures that happened to exist.
---
 frontend/ui-core/src/screens/ProjectsScreen.tsx | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/frontend/ui-core/src/screens/ProjectsScreen.tsx b/frontend/ui-core/src/screens/ProjectsScreen.tsx
index 5f994ec0..af05fadd 100644
--- a/frontend/ui-core/src/screens/ProjectsScreen.tsx
+++ b/frontend/ui-core/src/screens/ProjectsScreen.tsx
@@ -170,8 +170,20 @@ export function ProjectsScreen({ onOpenProject }: ProjectsScreenProps): JSX.Elem
                       {project.name}
                     </Button>
                   </TableCell>
-                  <TableCell className="text-muted-foreground">
-                    {project.description ?? <span className="text-xs">—</span>}
+                  {/* Clamped, because the column is narrow and a description is
+                      free text: unclamped, a long one wraps a word-fragment per
+                      line and takes the row to several hundred pixels, which at a
+                      narrow width is a tall empty row with its text scrolled out
+                      of sight. Two lines here, and the project's own page carries
+                      the whole of it. */}
+                  <TableCell className="max-w-64 text-muted-foreground">
+                    {project.description === null || project.description === undefined ? (
+                      <span className="text-xs">—</span>
+                    ) : (
+                      <span className="line-clamp-2" title={project.description}>
+                        {project.description}
+                      </span>
+                    )}
                   </TableCell>
                   <TableCell className="text-xs text-muted-foreground">
                     {project.created_at === null ? (