From 5f5a32927aa3df2be4761374966dbad807d22e19 Mon Sep 17 00:00:00 2001
From: Willie Chalmers III <willie@lasvegasfortransit.org>
Date: Wed, 30 Sep 2026 20:04:01 -0700
Subject: [PATCH 1/2] fix(site): Make join steps compact and clear

Put the join form's purpose ahead of its progress cue and keep both
stages visible without crowding the first question on small screens.
Label the optional stage for all the details it asks about.

Co-authored-by: Codex <noreply@openai.com>
---
 apps/site/public/scripts/join-steps.js        | 47 ++++++++++++++-----
 apps/site/src/components/join/JoinForm.astro  |  2 +-
 .../src/components/join/JoinProgress.astro    | 12 +++--
 apps/site/src/pages/join/member/index.astro   |  9 ++--
 4 files changed, 49 insertions(+), 21 deletions(-)

diff --git a/apps/site/public/scripts/join-steps.js b/apps/site/public/scripts/join-steps.js
index b3e02553..7529b49e 100644
--- a/apps/site/public/scripts/join-steps.js
+++ b/apps/site/public/scripts/join-steps.js
@@ -2,6 +2,20 @@
 // The basic details and optional questions share one form, so the join still
 // works without JavaScript. With JavaScript, they become two short screens.
 (() => {
+  function updateProgress(items, step) {
+    items.forEach((item, index) => {
+      const current = index + 1 === step;
+      if (current) item.setAttribute('aria-current', 'step');
+      else item.removeAttribute('aria-current');
+      item.classList.toggle('border-primary', current);
+      item.classList.toggle('border-outline/25', index + 1 > step);
+      item.classList.toggle('border-on-surface', index + 1 < step);
+      item.classList.toggle('text-on-surface', index + 1 <= step);
+      item.classList.toggle('text-on-surface-variant', index + 1 > step);
+      item.classList.toggle('font-bold', current);
+    });
+  }
+
   function run() {
     const form = document.querySelector('form[action="/join/member/"][data-enhance]');
     const progress = document.querySelector('[data-join-progress]');
@@ -14,7 +28,23 @@
     const email = form.querySelector('[name="email"]');
     const consent = form.querySelector('[name="consent"]');
     const items = progress.querySelectorAll('li');
-    if (!first || !second || !continueButton || !backButton || !email || !consent) return;
+    const basicHeading = document.querySelector('[data-join-heading-basic]');
+    const interestsHeading = document.querySelector('[data-join-heading-interests]');
+    const intro = document.querySelector('[data-join-intro]');
+    if (
+      [
+        first,
+        second,
+        continueButton,
+        backButton,
+        email,
+        consent,
+        basicHeading,
+        interestsHeading,
+        intro,
+      ].some((element) => !element)
+    )
+      return;
 
     form.dataset.joinSteps = '1';
     progress.style.display = '';
@@ -24,17 +54,10 @@
     function show(step) {
       first.hidden = step !== 1;
       second.hidden = step !== 2;
-      items.forEach((item, index) => {
-        const current = index + 1 === step;
-        if (current) item.setAttribute('aria-current', 'step');
-        else item.removeAttribute('aria-current');
-        item.classList.toggle('border-primary', current);
-        item.classList.toggle('border-outline/25', index + 1 > step);
-        item.classList.toggle('border-on-surface', index + 1 < step);
-        item.classList.toggle('text-on-surface', index + 1 <= step);
-        item.classList.toggle('text-on-surface-variant', index + 1 > step);
-        item.classList.toggle('font-bold', current);
-      });
+      basicHeading.hidden = step !== 1;
+      interestsHeading.hidden = step !== 2;
+      intro.hidden = step !== 1;
+      updateProgress(items, step);
       if (step === 2)
         second.querySelector('[data-join-stage-heading]')?.focus({ preventScroll: true });
       else email.focus({ preventScroll: true });
diff --git a/apps/site/src/components/join/JoinForm.astro b/apps/site/src/components/join/JoinForm.astro
index da6e95f6..cf5fe136 100644
--- a/apps/site/src/components/join/JoinForm.astro
+++ b/apps/site/src/components/join/JoinForm.astro
@@ -84,7 +84,7 @@ const { action } = Astro.props;
 
   <div data-join-stage="2" class="space-y-8">
     <p class="text-on-surface-variant focus:outline-none" tabindex="-1" data-join-stage-heading>
-      Everything here is optional. Tell us what interests you!
+      Share what you'd like, or skip these questions.
     </p>
     <ChoiceGroup
       name="interests"
diff --git a/apps/site/src/components/join/JoinProgress.astro b/apps/site/src/components/join/JoinProgress.astro
index 69a77433..0002c30d 100644
--- a/apps/site/src/components/join/JoinProgress.astro
+++ b/apps/site/src/components/join/JoinProgress.astro
@@ -4,11 +4,11 @@ interface Props {
 }
 
 const { step } = Astro.props;
-const steps = ['About you', 'Your interests'];
+const steps = ['Basic info', 'Optional details'];
 ---
 
 <ol
-  class="mb-10 grid grid-cols-2 gap-2"
+  class="mt-6 grid grid-cols-2 gap-2"
   aria-label="Join LVBT progress"
   data-join-progress
   style="display:none"
@@ -22,14 +22,16 @@ const steps = ['About you', 'Your interests'];
         <li
           aria-current={current ? 'step' : undefined}
           class:list={[
-            'border-t-4 pt-3 text-sm leading-tight',
+            'flex items-center gap-2 border-b-2 pb-2 text-sm leading-tight',
             current ? 'border-primary text-on-surface font-bold' : 'border-outline/25',
             complete && 'border-on-surface text-on-surface',
             !current && !complete && 'text-on-surface-variant',
           ]}
         >
-          <span class="block text-xs font-bold">Step {position} of 2</span>
-          <span class="mt-1 block">{label}</span>
+          <span class="text-xs font-bold" aria-hidden="true">
+            {position}
+          </span>
+          <span>{label}</span>
         </li>
       );
     })
diff --git a/apps/site/src/pages/join/member/index.astro b/apps/site/src/pages/join/member/index.astro
index bc10d6a9..793b3c73 100644
--- a/apps/site/src/pages/join/member/index.astro
+++ b/apps/site/src/pages/join/member/index.astro
@@ -11,11 +11,14 @@ import { t } from '../../../../platform/messages';
 ---
 
 <BaseLayout title={t('join.title')} description={t('join.description')}>
-  <section class="container-page pt-12 pb-16 md:pt-16 md:pb-24">
+  <section class="container-page pt-8 pb-16 md:pt-16 md:pb-24">
     <div class="max-w-2xl">
+      <h1 class="text-headline-lg">
+        <span data-join-heading-basic>{t('join.heading')}</span>
+        <span data-join-heading-interests hidden>Optional details</span>
+      </h1>
+      <p class="lede mt-4" data-join-intro>{t('join.intro')}</p>
       <JoinProgress step={1} />
-      <h1 class="text-headline-lg">{t('join.heading')}</h1>
-      <p class="lede mt-4">{t('join.intro')}</p>
       <JoinForm action="/join/member/" />
     </div>
   </section>

From 57fea0be1eada872df7e9ba60281959a40f3724a Mon Sep 17 00:00:00 2001
From: Willie Chalmers III <willie@lasvegasfortransit.org>
Date: Wed, 30 Sep 2026 20:22:02 -0700
Subject: [PATCH 2/2] test(site): Keep recurring event metadata checks fast

Read event links and titles after each page loads. The metadata is in
server-rendered HTML, so waiting for unrelated network activity made
the preview check exceed its time limit.

Co-authored-by: Codex <noreply@openai.com>
---
 apps/site/tests/e2e/body-links.spec.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/apps/site/tests/e2e/body-links.spec.ts b/apps/site/tests/e2e/body-links.spec.ts
index 72d5912f..d18c18c5 100644
--- a/apps/site/tests/e2e/body-links.spec.ts
+++ b/apps/site/tests/e2e/body-links.spec.ts
@@ -183,7 +183,6 @@ test.describe('body content links', () => {
 
   test('uses date-specific metadata for recurring event pages', async ({ page }) => {
     await page.goto('/events');
-    await page.waitForLoadState('networkidle');
 
     const eventPaths = [
       ...new Set(
@@ -200,7 +199,6 @@ test.describe('body content links', () => {
     const metaTitlesByHeading = new Map<string, string[]>();
     for (const eventPath of eventPaths) {
       await page.goto(eventPath);
-      await page.waitForLoadState('networkidle');
 
       const heading = (await page.locator('h1').first().innerText()).trim();
       const metaTitle = await page.title();