[Bug+UX · V1] Case Marketplace redesign — wide 3-col cards + 2-col detail (Gemini / #423) #552

Header

• Priority: Medium–High (Visual polish + marketplace conversion UX)
• Owner: Frontend Developer
• Type: Bug + Enhancement (consolidates original [Bug+UX · V1] Case Marketplace redesign — wide 3-col cards + 2-col detail (Gemini / #423) #552 CSS bugs + Gemini full redesign)
• Content SoT (closed): #423 — Unified Case Card & Detail Page (field inventory / Cap.57 / fee pills / Apply rules). This issue implements the visual redesign of those locks — do not reopen [Feature / UX] Unified Case Card & Detail Page (B2C + B2B Cap.57 Safe) #423 unless content rules change.
• Depends on / related: Cap.57 / 1.5-lesson fee SoT unchanged. Related polish (different surface): #546 (tutor Core Academic Breakdown). Parked UX floor: #494. Case type distinction (Private / Centre / Activity-Gig) integrated from Issue B.

1. Problem

Open requests (/cases) cards are packed left and too narrow (~55% empty whitespace), and the 1.5-Lesson fee badge overlaps the “Posted about …” timestamp. Case detail (/cases/[id]) stacks everything in a narrow left column, buries Fee & payout at the bottom, and leaves the right half blank. Live cards are only a partial ship of #423 (missing trust pills / Cap.57 chrome / unified chip taxonomy / bilingual auto-title polish).

Additional: All cases currently sit together without visual or filterable distinction between private parent/student requests, partner centre requests, and non-academic educational activities/gigs. Tutors cannot immediately tell what type of work or fee structure applies before claiming a case.

CEO source: Gemini UI/UX redesign spec (2026-10-31) — Twitter/X Ink #0F1419 + scarce Azure #1D9BF0.

2. Product lock

3. Exact behaviour

A. Board grid (/cases)

Break out of the narrow central column; match Tutor Directory width:

max-w-[1360px] mx-auto px-4 sm:px-6 lg:px-8
grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 w-full items-stretch

• Equal width: Even with 1–2 cases, each card stays one 1fr column (~33.3% desktop) — do not stretch full-bleed.
• Equal height: Every internal row uses 1-line truncation (truncate / whitespace-nowrap overflow-hidden text-ellipsis).
• Breakpoints: <768 → 1 · 768–1024 → 2 · >1024 → 3.
• Ultra-wide: container max-width + mx-auto so cards do not grow infinitely.

Type filter: At the top of the board: [ All ] [ Private ] [ Centre ] [ Activity / Gig ]. Default All. Combinable with existing subject/curriculum/location filters. Legacy untyped cases default to Private.

B. Case card — Parent vs Centre vs Activity wireframes

VARIANT A: PARENT / PRIVATE CASE CARD
+-----------------------------------------------------------------------+
| [Private] (P) Parent   [⭐ 4.9] [💳 On-time]              🔥 ASAP     |
|                                                                       |
| IBDP Chemistry HL — Y12                                               |
| IBDP 化學 HL — 中六 (Y12)                                             |
|                                                                       |
| 📍 Yuen Long · In-person · 1×/wk · 60m · Up to HK$500/hr  [👥 2]      |
|                                                                       |
| [⚠️ Female Only] [Uni Student/Grad] [IA/EE/SBA] [Exam Drilling]  +2   |
+-----------------------------------------------------------------------+
| ⊞ Compare   ↗ Share   🔖 Save                         View details →  |
+-----------------------------------------------------------------------+
| [ 1.5-Lesson ]                                     Posted 2 hours ago |
+-----------------------------------------------------------------------+

VARIANT B: PARTNER CENTRE CASE CARD (Cap.57 Compliant)
+-----------------------------------------------------------------------+
| [Centre] [Logo] Top Leader Ed ✓   [🚫 Zero Admin/Reception Duty]      |
|                                                                       |
| HKDSE Mathematics (Core) — S5                                         |
| HKDSE 數學 (必修部分) — 中五 (S5)                                     |
|                                                                       |
| 📍 Causeway Bay · In-person · 2×/wk · 90m · HK$350–450/hr [👥 4]      |
|                                                                       |
| [Certified Teacher/Examiner] [Cantonese Taught] [Exam Drilling]       |
+-----------------------------------------------------------------------+
| ⊞ Compare   ↗ Share   🔖 Save                         View details →  |
+-----------------------------------------------------------------------+
| [ 20% Short ]                                        Posted 1 day ago |
+-----------------------------------------------------------------------+

VARIANT C: ACTIVITY / GIG CASE CARD
+-----------------------------------------------------------------------+
| [Activity]  Activity Host / Tutor                                     |
|                                                                       |
| STEM Robotics Workshop — Primary                                      |
| STEM 機械人工作坊 — 小學                                              |
|                                                                       |
| 📍 Online · One-off · 90m · HK$400/session                            |
|                                                                       |
| [Workshop] [STEM] [Primary]                                           |
+-----------------------------------------------------------------------+
| ⊞ Compare   ↗ Share   🔖 Save                         View details →  |
+-----------------------------------------------------------------------+
| [ 1.5-Lesson ]                                       Posted 3 days ago|
+-----------------------------------------------------------------------+

C. Case card component anatomy & CSS

(Existing anatomy unchanged; add type badge in Row 1 identity area.)

• Card shell: bg-white border border-[#EFF3F4] hover:border-[#CFD9DE] rounded-2xl p-5 flex flex-col justify-between transition-all shadow-[0_1px_2px_rgba(15,20,25,0.03)]
• Remove fixed card widths (w-72, max-w-sm) so cards inherit w-full from the grid 1fr column.

Row 1 — Identity (h-7 flex items-center justify-between gap-2):

• Type badge first: [Private] / [Centre] / [Activity]
• Parent: 24px circular avatar + bold Parent + trust pills.
• Centre: 24px logo + linked name + Cap.57 chip.
• Activity: Host name or generic.

(Rest of rows unchanged from prior lock.)

D. Case detail — 2-column asymmetric (/cases/[id])

(Existing 2-col layout unchanged.)

Add prominent type badge + fee rule in the left header / summary:

• Private: “Standard 1.5-lesson fee applies”
• Centre: “Centre step-down / 20% Short fee structure”
• Activity / Gig: “Standard 1.5-lesson fee applies”

Hard-gender mismatch guard: unchanged.

4. Before → After (vs CEO screenshots)

(Existing table unchanged; add:)
| No type distinction | Type badge + filter (Private / Centre / Activity) |

5. Optional (parked) — Rate-First card variant

(Unchanged.)

6. Implementation notes

• Reuse Tutor Directory wide wrapper; apply same max-w-[1360px] family to /cases board (detail stays max-w-6xl).
• Prefer CSS Grid over inline-flex / uncontrolled flex-wrap for the card list.
• Content field inventory stays locked to [Feature / UX] Unified Case Card & Detail Page (B2C + B2B Cap.57 Safe) #423 — this issue is chrome + layout + type badges, not new product rules.
• Azure only on detail Apply / WhatsApp; list CTAs stay neutral (parity with tutor cards).
• Add case_type (or equivalent) field: private | centre | activity. Default private for legacy.
• Type filter query param on board.
• Creation: add type selector to admin / existing case form. Activity cases currently admin-seeded or manual.
• Activity / Gig fee = same 1.5-lesson structure as Private (locked).

7. Acceptance criteria

• Desktop: exactly 3 equal large cards per row; grid wider than filter bar (max-w-[1360px] or tutor-page equivalent).
• Mobile / tablet reflow to 1 / 2 columns.
• With only 1–2 open requests, cards stay ~⅓ width (do not stretch full-bleed).
• Fee pill + timestamp never overlap (justify-between + shrink-0).
• Parent card shows trust pills; Centre card shows verified link + permanent Cap.57 chip.
• Bilingual auto-title + unified Hard/Soft chip row (max 8 + +N); no grey # tags; no HK$?.
• Neutral list CTAs: Compare · Share · Save · View details →.
• Detail: lg:grid-cols-12 — left 7 cols spec; right sticky Apply (Azure) + Net Payout for all 3 packages (1.5 / 20% Short / Pro-Bono $0).
• Hard-gender mismatch: Apply disabled + ⚠️ callout.
• Client notes hidden when empty; contacts stripped.
• Rate-First variant not required unless CEO promotes (parked).
• Cases board displays filter options for Private, Centre, and Activity / Gig.
• Every case card shows its type badge.
• Case detail displays the type badge and corresponding fee structure information prominently before the claim action.
• Filtering by each case type returns only matching cases (legacy untyped appear under Private).
• Activity / Gig cases show the 1.5-lesson fee pill and note.
• Verified on both desktop and mobile in English and 繁中.

8. Out of scope

• On-platform Stripe tuition collection for physical centre classes (remains parked in [Parked Epic – V3] Institutional Layer: Profiles, Events, Verification & Network #458).
• Classroom timetable / attendance management.
• Seat inventory or multi-seat checkout.
• Changing existing [Feature · V1 · #251] Digital materials: Stripe checkout, 2% fee, R2 download, 72h hold #543 materials checkout.
• Implying employment relationships under Cap. 57.
• Full self-serve centre case posting dashboard.

9. Test plan

1. Tutor free-text / board: Open cases board; verify type filter and badges.
2. Filter: Select Private / Centre / Activity; confirm only matching cases remain. Legacy untyped under Private.
3. Detail: Open each type; confirm badge + fee note above Apply CTA.
4. Mobile: Repeat on mobile viewport.
5. Empty filter: Filter to a type with zero cases; confirm empty state + reset.
6. Activity fee: Confirm Activity / Gig cases display the 1.5-lesson fee pill and note.

Open questions — CLOSED

1. Activity / Gig fee structure: Locked to the same 1.5-lesson administrative fee as Private cases. Keeps Cap.57 and fee logic consistent. Future product decision can change it; do not invent a new path in this issue.
2. Creation path: Add type selector to admin / existing case form. Legacy untyped cases default to Private. Parent-facing form remains Private-only unless product expands it.
3. Copy: Private / 私人, Centre / 中心, Activity / 活動. Fee helper text: “Standard 1.5-lesson fee applies” / “標準 1.5 堂管理費適用” for both Private and Activity; Centre reuses existing 20% Short.

ADOPTED addendum (2026-10-31 · CEO review)

Equal-width grid = shared marketplace SoT

• The /cases board rule is the spacing SoT for future equal-card marketplace grids (notes, centres, etc. when they use the same board chrome):
  • max-w-[1360px] mx-auto px-4 sm:px-6 lg:px-8
  • grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 w-full items-stretch
  • Cards = 1fr columns (do not stretch full-bleed when <3 items)
• New card types should reuse this wrapper, not invent a narrower column.

Mobile footer AC (explicit)

• Fee pill + Posted timestamp must not overlap at the smallest mobile breakpoint (320–375px width).
• Footer remains flex items-center justify-between gap-4; fee pill shrink-0; timestamp may truncate (truncate text-right) but never underlaps the pill.
• Acceptance check: viewport 375px and 320px — visual + layout test in AC below.

Additional AC

• Equal-width 1fr + max-w-[1360px] documented as shared SoT for future marketplace card grids.
• At 320px / 375px width, fee pill and timestamp never overlap or collide.
• Type badges and filter ship with the redesign.
• Activity / Gig cases use the 1.5-lesson fee.