From f208299f1b623d89977aba9c03a2273a22c0c9e0 Mon Sep 17 00:00:00 2001
From: Sabine Maennel <5292683+sabinem@users.noreply.github.com>
Date: Wed, 2 Sep 2026 07:05:48 +0200
Subject: [PATCH] style(frontend): the organizer's participant page reads like
 the member's
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`participants/[participantId]` was set to be read in 648e77ee0b; this page
was left in the shape that one had before it — every sentence 12px mono at
the width of the window, two type sizes for the whole page, and each answer
running its question into its value on one line, so a question and its
answer read as a single sentence with no column to scan.

The same treatment, deliberately identical rather than merely similar:
capped column, a card per section, `text-section` headings, sentences in
`.prose`, and the answers in a two-column grid with the question quieter
beside the value. The two pages show one person and differ only in what
they may say and do about them, so an organizer moving between them should
be reading one page in two states rather than learning a second layout.

Nothing an organizer acts on is changed: the email line, the Shared chips,
Approve, Make owner, Remove owner, the two-step removal and its reset when
the page swaps to another person, and the note explaining why an owner has
no Remove button. Answers still render through `AnswerText`, and the value
keeps `min-w-0 break-words` so a pasted address wraps rather than widening
the column.
---
 .../lib/components/layout/AppFooter.svelte    |  20 +++-
 .../frontend/src/lib/utils/imageUrl.test.ts   |   2 +-
 .../manage/[participantId]/+page.svelte       | 101 ++++++++++++------
 3 files changed, 84 insertions(+), 39 deletions(-)

diff --git a/components/frontend/src/lib/components/layout/AppFooter.svelte b/components/frontend/src/lib/components/layout/AppFooter.svelte
index 76deb9a2..88930ac8 100644
--- a/components/frontend/src/lib/components/layout/AppFooter.svelte
+++ b/components/frontend/src/lib/components/layout/AppFooter.svelte
@@ -125,9 +125,23 @@
              canvas. Keep any replacement asset white-on-transparent.
 
              Heights differ because a shared box height is not a shared apparent
-             size. Measured against EPFL's cap height, PSI's lettering fills 48%
+             size. Measured against EPFL's cap height, PSI's lettering fills 50%
              of its asset and Biopôle's 55%, the rest being their graphic marks —
-             so h-5 for those two against h-4 for the two bare wordmarks. -->
+             so h-5 for those two against h-4 for the two bare wordmarks.
+
+             PSI is the one that had to be vector rather than a PNG. Its mark is
+             a stipple — a cloud of separate dots — and a 91x40 bitmap of that
+             scaled down to 20px moirés into a mottled blob on any 1x display,
+             which is what "the logo looks brownish" turned out to be. Nothing
+             tinted it: every pixel of that PNG was neutral grey. It was the
+             dither collapsing. Vector dots stay dots at every DPI.
+
+             Source: commons.wikimedia.org/wiki/File:Paul_Scherrer_Institute_Logo.svg
+             ({{PD-textlogo}} — simple shapes and text, below the threshold of
+             originality, so public domain; the trademark is PSI's and this is
+             nominative use, same as the three beside it). Recoloured white on
+             the root <svg>; the file declares no other fill, which is why one
+             attribute is enough. -->
         <div class="flex flex-wrap items-center gap-x-8 gap-y-4 pb-10">
             <a href="https://epfl.ch" target="_blank" rel="noopener noreferrer" class={LOGO_LINK}>
                 <img src="/images/logos/epfl.svg" alt="EPFL" class="h-4 invert dark:invert-0" />
@@ -145,7 +159,7 @@
                 rel="noopener noreferrer"
                 class={LOGO_LINK}
             >
-                <img src="/images/logos/psi.png" alt="PSI" class="h-5 invert dark:invert-0" />
+                <img src="/images/logos/psi.svg" alt="PSI" class="h-5 invert dark:invert-0" />
             </a>
             <a
                 href="https://www.biopole.ch/"
diff --git a/components/frontend/src/lib/utils/imageUrl.test.ts b/components/frontend/src/lib/utils/imageUrl.test.ts
index aa9846c0..0f30828c 100644
--- a/components/frontend/src/lib/utils/imageUrl.test.ts
+++ b/components/frontend/src/lib/utils/imageUrl.test.ts
@@ -17,7 +17,7 @@ describe("adviseImageUrl", () => {
 
   it("rejects what is not a web address", () => {
     expect(adviseImageUrl("logo.png").problem).toMatch(/https:\/\//)
-    expect(adviseImageUrl("/images/logos/psi.png").problem).toMatch(
+    expect(adviseImageUrl("/images/logos/psi.svg").problem).toMatch(
       /https:\/\//,
     )
   })
diff --git a/components/frontend/src/routes/(app)/my/hackathon/[id]/participants/manage/[participantId]/+page.svelte b/components/frontend/src/routes/(app)/my/hackathon/[id]/participants/manage/[participantId]/+page.svelte
index b0edb419..f74429aa 100644
--- a/components/frontend/src/routes/(app)/my/hackathon/[id]/participants/manage/[participantId]/+page.svelte
+++ b/components/frontend/src/routes/(app)/my/hackathon/[id]/participants/manage/[participantId]/+page.svelte
@@ -70,8 +70,15 @@
   This is also the only page that shows an organizer the *whole* registration
   form. `participants/[participantId]` stays the participant view and shows the
   shared answers only, to an organizer included.
+
+  Set the same way as that page, deliberately: same capped column, same card per
+  section, same two-column answer grid, same type roles. The two show one person
+  and differ only in what they are allowed to say and do about them, so an
+  organizer moving between them should be reading the same page in two states
+  rather than learning a second layout.
 -->
-<div class="flex w-full flex-col gap-6 px-4 py-8 sm:px-10 md:px-20">
+<div class="flex w-full flex-col px-4 py-8 sm:px-10 md:px-20">
+  <div class="flex w-full max-w-3xl flex-col gap-6">
     <a
         href="{resolve(
             `/my/hackathon/${data.hackathonId}/participants/manage`
@@ -119,21 +126,21 @@
         </div>
     </div>
 
-    <section class="flex flex-col gap-2">
-        <h3 class="m-0 text-sm font-semibold text-ink">Registration answers</h3>
+    <section class="card box-border flex w-full flex-col gap-3 px-5 py-4">
+        <h3 class="m-0 text-section text-ink">Registration answers</h3>
         {#if data.answersFailed}
             <!-- Said outright rather than shown as an empty form: "answered
                  nothing" is what an organizer decides on, and a failed call is no
                  basis for it. -->
-            <p class="m-0 text-xs text-ink-3">
+            <p class="prose m-0 text-sm text-ink-3">
                 Answers could not be loaded. Reload the page to try again.
             </p>
         {:else if data.questionCount === 0}
-            <p class="m-0 text-xs text-ink-3">
+            <p class="prose m-0 text-sm text-ink-3">
                 This hackathon's registration form asks nothing yet.
             </p>
         {:else if data.answers.length === 0}
-            <p class="m-0 text-xs text-ink-3">
+            <p class="prose m-0 text-sm text-ink-3">
                 {data.participant.name} has not answered the registration form.
             </p>
         {:else}
@@ -142,59 +149,82 @@
                  here, including the ones the event keeps between the organizers
                  and the applicant — the chip marks which of them the rest of the
                  hackathon can also read. -->
-            <dl class="m-0 flex flex-col gap-1 border-l border-line pl-3">
+            <dl
+                class="m-0 grid gap-x-6
+                       sm:grid-cols-[minmax(0,14rem)_minmax(0,1fr)] sm:gap-y-2.5"
+            >
                 {#each data.answers as answer (answer.questionId)}
-                    <div class="flex flex-wrap items-center gap-x-2">
-                        <dt class="text-xs text-ink-3">{answer.label}</dt>
-                        <!-- `min-w-0` so a pasted address wraps rather than
-                             widening the row: see the participant profile. -->
-                        <dd class="m-0 min-w-0 break-words text-xs text-ink">
+                    <!-- The row gap lives on the label, not on the grid: below sm
+                         the grid is one column, and a uniform row gap would put as
+                         much space between a label and its own answer as between
+                         one question and the next. -->
+                    <dt
+                        class="mt-3 text-xs leading-snug text-ink-3 first:mt-0
+                               sm:mt-0 sm:pt-1"
+                    >
+                        {answer.label}
+                    </dt>
+                    <!-- `min-w-0` so a pasted address wraps rather than widening
+                         the column: see the participant profile. -->
+                    <dd class="m-0 flex min-w-0 flex-wrap items-center gap-2">
+                        <span class="min-w-0 break-words text-body leading-snug text-ink">
                             <AnswerText value={answer.value} />
-                        </dd>
+                        </span>
                         {#if answer.publicAnswers}
                             <span class="badge badge-neutral">Shared</span>
                         {/if}
-                    </div>
+                    </dd>
                 {/each}
             </dl>
         {/if}
     </section>
 
-    <section class="flex flex-col gap-2">
-        <h3 class="m-0 text-sm font-semibold text-ink">Teams</h3>
+    <section class="card box-border flex w-full flex-col gap-3 px-5 py-4">
+        <h3 class="m-0 text-section text-ink">Teams</h3>
         <!-- Same three outcomes as the member-facing profile. An owner reads
              teams whether or not they are published, so this branch is the
              global-admin-who-is-not-the-owner case rather than the common one. -->
         {#if !data.teamsPublished}
-            <p class="m-0 text-xs text-ink-3">
+            <p class="prose m-0 text-sm text-ink-3">
                 Team assignments have not been published in this hackathon yet.
             </p>
         {:else if data.teamsFailed}
-            <p class="m-0 text-xs text-ink-3">
+            <p class="prose m-0 text-sm text-ink-3">
                 Teams could not be loaded. Reload the page to try again.
             </p>
         {:else if data.teams.length === 0}
-            <p class="m-0 text-xs text-ink-3">
+            <p class="prose m-0 text-sm text-ink-3">
                 {data.participant.name} is not on a team in this hackathon yet.
             </p>
         {:else}
-            {#each data.teams as team (team.id)}
-                <a
-                    href={resolve(`/my/hackathon/${data.hackathonId}/teams/${team.id}`)}
-                    class="card card-raised box-border flex w-full flex-col gap-1 px-5 py-4
-                           no-underline hover:border-accent"
-                >
-                    <span class="text-sm leading-snug text-ink">{team.name}</span>
-                    {#if team.projectTitle}
-                        <span class="text-xs leading-snug text-ink-2">{team.projectTitle}</span>
-                    {/if}
-                </a>
-            {/each}
+            <!-- Rows separated by hairlines rather than nested cards: the section
+                 is already a card, and a card inside a card reads as two frames
+                 for one thing. -->
+            <div class="flex flex-col">
+                {#each data.teams as team (team.id)}
+                    <a
+                        href={resolve(`/my/hackathon/${data.hackathonId}/teams/${team.id}`)}
+                        class="group flex flex-col gap-0.5 border-t border-line py-3
+                               no-underline first:border-t-0 first:pt-0 last:pb-0"
+                    >
+                        <span
+                            class="text-body leading-snug text-ink group-hover:text-accent-ink"
+                        >
+                            {team.name}
+                        </span>
+                        {#if team.projectTitle}
+                            <span class="text-xs leading-snug text-ink-2">
+                                {team.projectTitle}
+                            </span>
+                        {/if}
+                    </a>
+                {/each}
+            </div>
         {/if}
     </section>
 
-    <section class="flex flex-col gap-3">
-        <h3 class="m-0 text-sm font-semibold text-ink">Manage</h3>
+    <section class="card box-border flex w-full flex-col gap-3 px-5 py-4">
+        <h3 class="m-0 text-section text-ink">Manage</h3>
 
         {#if form?.message}
             <p class="m-0 text-xs text-danger-ink" role="alert">{form.message}</p>
@@ -209,7 +239,7 @@
                  project reject form takes the page over: nothing else here should
                  be one mis-click away from a deletion. -->
             <div class="flex flex-col gap-2">
-                <p class="m-0 max-w-[60ch] text-xs text-ink-2">
+                <p class="prose m-0 text-sm text-ink-2">
                     {#if data.participant.isWaiting}
                         Declining deletes {data.participant.name}'s application. There is no
                         rejected state to come back to — they can ask to join again, and
@@ -276,7 +306,7 @@
             <!-- Why an owner has no Remove, said rather than left as a missing
                  button: the two-step is the path, not a refusal. -->
             {#if data.isOwner}
-                <p class="m-0 max-w-[60ch] text-xs text-ink-3">
+                <p class="prose m-0 text-sm text-ink-3">
                     {#if data.isMe}
                         You cannot remove your own owner role here — it is what this page
                         runs on. Another owner can, on this page.
@@ -288,4 +318,5 @@
             {/if}
         {/if}
     </section>
+  </div>
 </div>