# Phase 20.1: UI Polish and Bug Fixes - Discussion Log

> **Audit trail only.** Do not use as input to planning, research, or execution agents.
> Decisions are captured in CONTEXT.md -- this log preserves the alternatives considered.

**Date:** 2026-04-12
**Phase:** 20.1-ui-polish-and-bug-fixes
**Areas discussed:** Avatar & card visual refresh, Font vertical alignment strategy, Product image pipeline, Connection-status messaging

---

## Avatar & Card Visual Refresh

### Avatar Size

| Option | Description | Selected |
|--------|-------------|----------|
| 46px (16px larger) | Noticeable increase, avatar becomes stronger visual anchor | |
| 50px (20px larger) | Middle of suggested range, avatar becomes prominent | |
| 54px (24px larger) | Maximum suggested, avatar becomes dominant element | |

**User's choice:** 40px inner + 2px purpose ring = 44px total, unified across cards and recipients option grid
**Notes:** User chose a size outside the suggested range (44px total vs 46-54px suggested), specifically requesting unification across both card tiles and Recipients option grid.

### Card Subtext Repositioning

| Option | Description | Selected |
|--------|-------------|----------|
| Move below title row | Subtext gets its own row beneath avatar+name | |
| Keep stacked, adjust spacing | Keep under name, tighten vertical spacing | |
| Move to note area | Subtext moves below items | |

**User's choice:** Don't reposition -- grow font sizes instead
**Notes:** User clarified this was addressed ad-hoc during a previous phase. Instead of repositioning, grow the recipient name and contact-secondary font sizes to fill the additional space from the larger avatar.

### Recipients Option Grid Tiles

| Option | Description | Selected |
|--------|-------------|----------|
| Match card style exactly | 44px avatar with ring, real image, purpose color, tooltip | ✓ |
| Scaled-down card style | Smaller ring+image (32px) for compact tiles | |
| You decide | Claude picks appropriate scale | |

**User's choice:** Match card style exactly
**Notes:** Tile height grows to accommodate the 44px avatar.

---

## Font Vertical Alignment Strategy

### Fix Approach

| Option | Description | Selected |
|--------|-------------|----------|
| Bundle a specific font | Embed a known-good font for guaranteed consistent metrics | ✓ |
| Fix per-component | Keep system font, fix vertical-alignment on problem spots | |
| You decide | Claude investigates root cause and picks best fix | |

**User's choice:** Bundle a specific font

### Font Selection

| Option | Description | Selected |
|--------|-------------|----------|
| Inter | Purpose-built for screens, excellent vertical metrics | ✓ |
| Noto Sans | Universal coverage, neutral appearance | |
| Roboto | Google's Material font, clean, slightly narrower | |

**User's choice:** Inter
**Notes:** User requested an HTML comparison page with all 3 fonts rendered in WITwhat's color scheme and typography scale. After reviewing the side-by-side comparison (font-comparison.html), chose Inter.

---

## Product Image Pipeline

### Card Square Image Rendering

| Option | Description | Selected |
|--------|-------------|----------|
| Fill square, cover crop | Image fills entire square, cropped to fit | |
| Fit inside, letterboxed | Image scales to fit inside, colored bg shows around edges | ✓ |
| You decide | Claude picks matching existing patterns | |

**User's choice:** Fit inside, letterboxed
**Notes:** image-fit: contain preserves full image at small sizes with colored background visible.

---

## Connection-Status Messaging

### Empty State Message (Connected)

| Option | Description | Selected |
|--------|-------------|----------|
| "No orders found" | Simple, no troubleshooting hint | |
| "No orders yet -- waiting for sync" | Suggests data will appear after next poll | |
| Per-state messages | Different text for each connection state | ✓ |

**User's choice:** Per-state messages, with "No orders to show" instead of "No orders found"
**Notes:** State 0: "Open Settings to connect your GitHub project", State 1: "Syncing...", State 2: "No orders to show", State 4: "Connect Shopify to see orders"

---

## Claude's Discretion

- Exact font size increases for recipient name and contact-secondary
- Inter font weight variants to bundle
- Image-url to Slint Image loading approach
- Shopify image download bug root cause
- All 10 remaining success criteria (SC2, SC3, SC8-16, SC17) are clear bug fixes

## Deferred Ideas

None -- discussion stayed within phase scope.