From d21e362da5babd00817dbda19a13c1f4f9de8339 Mon Sep 17 00:00:00 2001
From: EllAchE <26192612+EllAchE@users.noreply.github.com>
Date: Sun, 16 Aug 2026 22:51:53 -0400
Subject: [PATCH] Inset the speaker portal task rows and widen the welcome
 banner

The "What you owe" list lives in a padding="none" card so its dividers can
run edge to edge, but the rows never took the inset back: the calendar icon
sat against the left edge of the card and the due badge against the right.
The rows now carry the card's own md padding, and the body gap that doubled
the space around each divider is gone.

The organizer welcome sits in .prose, whose 68ch reading measure is right for
a task description but leaves the hero half empty on a wide screen. It now
tracks the container, which --content-max already bounds.
---
 app/portal/[eventSlug]/page.tsx |  4 ++--
 app/portal/portal.module.css    | 28 +++++++++++++++++++++++++++-
 2 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/app/portal/[eventSlug]/page.tsx b/app/portal/[eventSlug]/page.tsx
index 019a6a7d..83ae10b5 100644
--- a/app/portal/[eventSlug]/page.tsx
+++ b/app/portal/[eventSlug]/page.tsx
@@ -59,7 +59,7 @@ export default async function PortalHomePage({
         <h1 className={styles.pageTitle}>Hello, {speakerName(me, ctx).split(' ')[0]}</h1>
         {branding.welcomeHtml ? (
           <div
-            className={styles.prose}
+            className={`${styles.prose} ${styles.heroProse}`}
             /* Organizer-authored, deliberately trusted: `S-7`. */
             dangerouslySetInnerHTML={{ __html: branding.welcomeHtml }}
           />
@@ -94,7 +94,7 @@ export default async function PortalHomePage({
           </div>
         ) : (
           <Card padding="none">
-            <CardBody>
+            <CardBody className={styles.checkList}>
               {outstanding.slice(0, 6).map((entry) => (
                 <div key={entry.assignmentId} className={styles.checkRow}>
                   {entry.overdue ? (
diff --git a/app/portal/portal.module.css b/app/portal/portal.module.css
index 158df9bb..19a956ee 100644
--- a/app/portal/portal.module.css
+++ b/app/portal/portal.module.css
@@ -297,6 +297,17 @@
   padding: var(--space-6);
 }
 
+/*
+ * The organizer's welcome is a banner, not an article. `.prose` caps every other body of text at the
+ * 68ch reading measure, which is right for a task description or an info page but leaves this block
+ * wrapping halfway across an empty hero on a wide screen. The hero is already bounded by
+ * `--content-max`, so the text tracks the container instead of a fixed measure.
+ */
+.heroProse {
+  max-width: none;
+  margin-top: var(--space-2);
+}
+
 .statGrid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
@@ -360,11 +371,16 @@
   align-items: center;
 }
 
+/*
+ * The rows sit inside a `padding="none"` card so the dividers run edge to edge, which means the row
+ * itself owns the inset. It matches the card default (`md`) so the list lines up with the padded
+ * cards beside it.
+ */
 .checkRow {
   display: flex;
   align-items: flex-start;
   gap: var(--space-3);
-  padding: var(--space-3) 0;
+  padding: var(--space-3) var(--space-4);
   border-bottom: var(--border-width) solid var(--border-hairline);
 }
 
@@ -372,6 +388,16 @@
   border-bottom: 0;
 }
 
+/* Rows carry their own vertical padding; the body gap would double it around each divider. */
+.checkList {
+  gap: var(--space-0);
+}
+
+/* The final row of the list is not the final row of the card: the footer action still follows it. */
+.checkList .checkRow:last-child {
+  border-bottom: var(--border-width) solid var(--border-hairline);
+}
+
 .checkLink {
   color: var(--text-strong);
   text-decoration: none;