From 1d5ca133218f39dddc2328772665cd77806d6997 Mon Sep 17 00:00:00 2001
From: Sabine Maennel <5292683+sabinem@users.noreply.github.com>
Date: Mon, 31 Aug 2026 21:14:41 +0200
Subject: [PATCH] fix(frontend): project rows show a 100-character markdown
 excerpt
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A project description is authored in the markdown editor, but the list row
printed it as source: rows opened with a literal "## Abstract summary of the
project proposal and context ## Goal", and since nothing capped or clamped
the text, a full body rendered five lines deep. A list whose job is telling
projects apart was neither readable nor scannable.

The loaders now flatten the markdown and cut it to a hundred characters with
markdownExcerpt — the same treatment the Pages list already gives page
bodies. The card's prop is renamed description -> excerpt, because a prop
that must secretly be pre-flattened is how the raw body finds its way back
in. The rest of the description lives one click away, behind More Info.

Flattening in the loader rather than the row also keeps whole descriptions
off the wire for every row of every list.
---
 .../components/hackathon/ProjectCard.svelte   | 25 ++++++++++++++-----
 .../frontend/src/lib/utils/projectExcerpt.ts  | 12 +++++++++
 .../hackathon/[id]/projects/+page.server.ts   |  6 +++--
 .../my/hackathon/[id]/projects/+page.svelte   |  4 +--
 .../[id]/projects/manage/+page.server.ts      |  4 ++-
 .../[id]/projects/manage/+page.svelte         |  2 +-
 6 files changed, 41 insertions(+), 12 deletions(-)
 create mode 100644 components/frontend/src/lib/utils/projectExcerpt.ts

diff --git a/components/frontend/src/lib/components/hackathon/ProjectCard.svelte b/components/frontend/src/lib/components/hackathon/ProjectCard.svelte
index 1d23c834..abf8f20c 100644
--- a/components/frontend/src/lib/components/hackathon/ProjectCard.svelte
+++ b/components/frontend/src/lib/components/hackathon/ProjectCard.svelte
@@ -7,7 +7,7 @@
     let {
         num,
         title,
-        description,
+        excerpt,
         creator,
         track,
         imageUrl,
@@ -19,7 +19,10 @@
     }: {
         num: number;
         title: string;
-        description: string;
+        /** The description, flattened out of markdown and cut to a row's worth
+         *  by the loader — never the raw body. Absent when the project has no
+         *  description, or has one with nothing quotable in it. */
+        excerpt?: string;
         /** Who proposed it. Omitted when the creator is no longer a member. */
         creator?: string;
         /** Track name. Omitted when the project has no track, or its track was
@@ -76,10 +79,20 @@
         </div>
         <!-- The description is the one genuinely prose-shaped thing on the card,
              so it takes the sans face. `max-width` in `ch` rather than `w-2/3`
-             keeps the measure readable at any container width. -->
-        <p class="prose m-0 max-w-[52ch] text-xs leading-snug text-ink-2">
-            {description}
-        </p>
+             keeps the measure readable at any container width.
+
+             Two lines and no more. The loader already cut the text to a hundred
+             characters, so the clamp is only what holds on a narrow screen,
+             where those hundred characters still run to three lines and the row
+             stops being scannable. -->
+        {#if excerpt}
+            <p
+                class="prose m-0 line-clamp-2 max-w-[52ch] text-xs leading-snug
+                       text-ink-2"
+            >
+                {excerpt}
+            </p>
+        {/if}
         <!-- Author and track on one line, each behind its own icon, so the two
              facts read as attributes of the row rather than sentences. The
              icons carry no information a sighted reader needs spelling out and
diff --git a/components/frontend/src/lib/utils/projectExcerpt.ts b/components/frontend/src/lib/utils/projectExcerpt.ts
new file mode 100644
index 00000000..4d065f4f
--- /dev/null
+++ b/components/frontend/src/lib/utils/projectExcerpt.ts
@@ -0,0 +1,12 @@
+/**
+ * How much of a project's description a list row carries.
+ *
+ * Lives here rather than in either loader because the participant list and the
+ * organiser's review queue show the same projects: a row that says more on one
+ * page than the other reads as two different descriptions of one project.
+ *
+ * Paired with `markdownExcerpt`, which flattens the markdown before cutting —
+ * so this counts the characters someone reads, not the `##` and `**` they do
+ * not.
+ */
+export const PROJECT_EXCERPT_CHARS = 100
diff --git a/components/frontend/src/routes/(app)/my/hackathon/[id]/projects/+page.server.ts b/components/frontend/src/routes/(app)/my/hackathon/[id]/projects/+page.server.ts
index 406ca7f5..2653b77f 100644
--- a/components/frontend/src/routes/(app)/my/hackathon/[id]/projects/+page.server.ts
+++ b/components/frontend/src/routes/(app)/my/hackathon/[id]/projects/+page.server.ts
@@ -10,6 +10,8 @@ import {
 import { enabledCapabilities } from "$lib/server/hackathon/phaseForm"
 import { fail } from "@sveltejs/kit"
 import { ClientError, Status } from "nice-grpc-common"
+import { markdownExcerpt } from "$lib/utils/markdown"
+import { PROJECT_EXCERPT_CHARS } from "$lib/utils/projectExcerpt"
 
 // No owner/admin check here: reviewing proposals is an organiser action and
 // lives under Manage Projects, which gates itself (see $lib/navigation's
@@ -136,7 +138,7 @@ export const load: PageServerLoad = async (event) => {
     id: p.id,
     num: ordered.length - i,
     title: p.title,
-    description: p.description,
+    excerpt: markdownExcerpt(p.description, PROJECT_EXCERPT_CHARS),
     creator: memberNames.get(p.creatorId),
     track: p.trackId ? trackNames.get(p.trackId) : undefined,
     imageUrl: p.image,
@@ -159,7 +161,7 @@ export const load: PageServerLoad = async (event) => {
     id: p.id,
     num: myProposals.length - i,
     title: p.title,
-    description: p.description,
+    excerpt: markdownExcerpt(p.description, PROJECT_EXCERPT_CHARS),
     creator: memberNames.get(p.creatorId),
     track: p.trackId ? trackNames.get(p.trackId) : undefined,
     imageUrl: p.image,
diff --git a/components/frontend/src/routes/(app)/my/hackathon/[id]/projects/+page.svelte b/components/frontend/src/routes/(app)/my/hackathon/[id]/projects/+page.svelte
index c45f2242..6a4429fe 100644
--- a/components/frontend/src/routes/(app)/my/hackathon/[id]/projects/+page.svelte
+++ b/components/frontend/src/routes/(app)/my/hackathon/[id]/projects/+page.svelte
@@ -89,7 +89,7 @@
                 <ProjectCard
                     num={proposal.num}
                     title={proposal.title}
-                    description={proposal.description}
+                    excerpt={proposal.excerpt}
                     creator={proposal.creator}
                     track={proposal.track}
                     imageUrl={proposal.imageUrl}
@@ -115,7 +115,7 @@
                 <ProjectCard
                     num={project.num}
                     title={project.title}
-                    description={project.description}
+                    excerpt={project.excerpt}
                     creator={project.creator}
                     track={project.track}
                     imageUrl={project.imageUrl}
diff --git a/components/frontend/src/routes/(app)/my/hackathon/[id]/projects/manage/+page.server.ts b/components/frontend/src/routes/(app)/my/hackathon/[id]/projects/manage/+page.server.ts
index 75789728..5a747fca 100644
--- a/components/frontend/src/routes/(app)/my/hackathon/[id]/projects/manage/+page.server.ts
+++ b/components/frontend/src/routes/(app)/my/hackathon/[id]/projects/manage/+page.server.ts
@@ -10,6 +10,8 @@ import {
   type ProjectFilter,
 } from "$lib/utils/projectFilter"
 import { error } from "@sveltejs/kit"
+import { markdownExcerpt } from "$lib/utils/markdown"
+import { PROJECT_EXCERPT_CHARS } from "$lib/utils/projectExcerpt"
 
 // The review queue: every project in the hackathon, one status at a time.
 //
@@ -97,7 +99,7 @@ export const load: PageServerLoad = async (event) => {
     id: p.id,
     num: shown.length - i,
     title: p.title,
-    description: p.description,
+    excerpt: markdownExcerpt(p.description, PROJECT_EXCERPT_CHARS),
     creator: memberNames.get(p.creatorId),
     track: p.trackId ? trackNames.get(p.trackId) : undefined,
     imageUrl: p.image,
diff --git a/components/frontend/src/routes/(app)/my/hackathon/[id]/projects/manage/+page.svelte b/components/frontend/src/routes/(app)/my/hackathon/[id]/projects/manage/+page.svelte
index b8fbad29..67d630d9 100644
--- a/components/frontend/src/routes/(app)/my/hackathon/[id]/projects/manage/+page.svelte
+++ b/components/frontend/src/routes/(app)/my/hackathon/[id]/projects/manage/+page.svelte
@@ -103,7 +103,7 @@
                 <ProjectCard
                     num={project.num}
                     title={project.title}
-                    description={project.description}
+                    excerpt={project.excerpt}
                     creator={project.creator}
                     track={project.track}
                     imageUrl={project.imageUrl}