# TrueTraceShorts ERF companion QA pitfalls

Use this when producing or publishing Everyday Red Flags (ERF) shorts with companion pages.

## Companion page layout QA

- Always inspect the bottom **Related red flags** section on every new companion page before delivery.
- Related cards that use real short startframes must preserve **9:16 portrait** framing. Do not show 9:16 video thumbnails inside flat/wide banner containers; it crops the top/bottom and looks broken.
- Preferred CSS pattern for related video cards: keep `.video-redflag-card .start-image-preview.compact` at `aspect-ratio: 9 / 16`, constrain width, and center it in the card.
- Verify visually on the generated/live page, not only by build success.

## Checklist title integrity

- After generating a companion page, inspect the rendered HTML/DOM for empty checklist headings such as `<strong></strong>`.
- Astro accessibility snapshots may omit text inside `strong`; confirm with DOM/HTML checks if the snapshot looks suspicious.
- Defensive page template pattern: after selecting `checklistDetails`, map each item to ensure `title` falls back to `entry.data.checklist[index]` or `Check N`.
- Run a quick static check over `dist/redflags/*/index.html` for empty `<strong></strong>` before delivery.

## YouTube private upload handoff

- After `OK_PRODUCE`, deliver the private-upload approval command but do not upload until the user sends it back exactly.
- After approved private YouTube upload, immediately patch the companion `videoUrl` with the resulting `https://www.youtube.com/shorts/<id>` link, rebuild, run production/live QA, and verify the page shows the `Open on YouTube` button.
- It is acceptable that the video remains private until the user manually makes it public; the companion link can already be present.

## Google Search Console verification for Cloudflare Pages

- If the user provides a Google HTML verification file, place it under the Astro site `public/` directory so Cloudflare serves it from the site root: `public/<google-token>.html` → `https://truetraceshorts.pages.dev/<google-token>.html`.
- Verify the live URL returns `200` and byte-for-byte matches the downloaded/source file before telling the user to verify in Search Console.

## Build / live checks

Minimum before delivery when the companion page changed:

1. `npm run build`
2. `npm run qa:production`
3. `npm run qa:live` after deploy/push when relevant
4. Browser/DOM check for:
   - YouTube button if `videoUrl` is set
   - checklist titles not empty
   - Related red flags cards in 9:16 portrait format