# Dispatch: disp-20260430-001

**Agent:** Daedalus 🎨
**Task:** Fix Event Graph card CSS polish on production dashboard
**Priority:** High
**Dispatched:** 2026-04-30 01:32 UTC
**ETA:** 2026-04-30 02:00 UTC (28 min)

## Handoff

### What
Fix the Event Graph card styling on the live dashboard. The card is functional but visually broken — emojis render as text, buttons stack vertically with no spacing, and the layout is cramped.

### Why
Event Graph card is now live on the dashboard but lacks the polish it needs. The backend and HTMX integration are working — this is purely a CSS/styling task.

### Files
- **Template:** `workspace-socrates/hoffdesk-api/dashboard/templates/dashboard.html.j2`
- **CSS:** `workspace-socrates/hoffdesk-api/dashboard/static/dashboard.css`
- **Screenshot:** See Matt's attached image showing current broken state

### Specific Issues to Fix
1. **Family member emojis** — 👤 renders as text fallback instead of proper icons/colors
2. **Action buttons** — Confirm/Decline/Counter buttons stack vertically with no margin/padding
3. **Card spacing** — Events are cramped together, need proper gap between cards
4. **Status badges** — "Needs Confirmation" / "Confirmed" labels need proper styling
5. **Date/time layout** — The 🕐📅 emojis + text layout is messy

### Success Criteria
- Event cards look polished and professional on mobile (iPhone Safari)
- Family member pills show with proper colors (not just 👤 emoji)
- Action buttons are horizontally aligned with proper spacing
- Overall card matches the quality of the Weather and Health cards

### Context
- The Event Graph card polls `/ui/events-list` every 30s via HTMX
- The card HTML is rendered server-side from `events_list.html.j2` component
- Current CSS file: 1213 lines, already has event styling but it's broken

**ACK required within 5 minutes. Check-ins at T+30min/T+2hr.**

---

## Status

| Time | Status | Notes |
|------|--------|-------|
| 01:32 UTC | DISPATCHED | Waiting for ACK |
| 01:35 UTC | COMPLETE (R1) | Initial polish done |
| 01:57 UTC | REVISION REQUESTED | Matt: separate mini-cards, color-coded participants |
| 01:58 UTC | DISPATCHED (R2) | Final pass with specific color requirements |
| 02:02 UTC | COMPLETE (R2) | Server restarted, CSS live |
| 02:15 UTC | REVISION REQUESTED | Matt: buttons too visually dominant |

## Revision Notes (Matt's Feedback)
- Events need to be visually distinct as **separate mini-cards**
- Each mini-card should have a **color-coded border or background** based on event type/category
- **Family member pills** need distinct colors (not just text):
  - Sullivan: blue
  - Harper: pink  
  - Aundrea: purple
  - Matt: gold/yellow
- **Status badges** need proper pill styling with background colors:
  - Confirmed: green background
  - Needs Confirmation: orange/amber background
  - Pending: purple background
- **Action buttons** need consistent styling (all should look like actual buttons, not just text boxes)
- **Date/time** should be cleaner (remove raw ISO dates, just show human-readable format)
- **⚡ Conflict indicator** on "Family Movie Night" needs proper warning styling

## Matt's Screenshot Reference
See attached image showing current state after initial polish. Events are stacked without visual separation. Need card-style mini-cards with shadows/borders.

---

## Archive

### First Pass (01:35 UTC)
Daedalus completed initial polish:
- Removed broken emojis
- Added horizontal button layout
- Added mobile-specific CSS
- Added colored dots for family members via CSS pseudo-elements

**Result:** Events functional but still lack visual distinction between cards.

---