[prakashNalla]

Description

Ticket CTA and Pricing Highlight drew the price at a fixed size (64px and 56px), so a longer price like $1,299.00 ran over the dashed separator and up to the card edge in Ticket CTA, and into "/month" in Pricing Highlight. Both now size the price with autoFontSize() the same way they already size the title, and truncate it as a last step (24 characters in Ticket CTA, 12 in Pricing Highlight). The default prices ($99, $29) keep their current size, so the defaults look the same.

In Pricing Highlight the price span also gets flexShrink: 0. Before, when the price and the period didn't fit, flexbox squeezed the price box and the text drew over "/month". Now the font size keeps the pair inside the card.

Closes #308

How I Tested This

Added tests/templates/ticket-cta.test.ts and tests/templates/pricing-highlight.test.ts. They render with satori and the bundled Inter fonts and check the layout:

• Ticket CTA: $1,299.00, $12,499.99 and From $149 / person stay inside the price column (between the separator and the card's padding), the default stays at 64px, and a 40 character price is truncated
• Pricing Highlight: $1,299.00, $12,499.99 and $1,234,567.89 keep "/month" after the price and inside the card, and the default stays at 56px

8 of the 9 tests fail without the template changes. Rendered the before images on the live site and the after images through /api/og on npm run dev, screenshots below.

npm run check: 0 errors, 0 warnings. npm run test: 80 files, 1549 of 1550 tests pass. The one failure is the existing agenda.test.ts "renders valid SVG and PNG for 2, 3, and 4 sessions" hitting the 5000ms timeout on my machine; it passes with --testTimeout=30000 and this change doesn't touch it. npm run build: passes.

AI Assistance

Claude helped me w/ understand the issue

Type of Change

• Bug fix

Screenshots

Ticket CTA with price=$1,299.00, before (live site):

Ticket CTA with price=$1,299.00, after:

<img width="600"alt="2-ticket-after" src="https://github.com/user-attachments/assets/82040d96-6847-48ec-b6d9-6e911dd7b744" />

Pricing Highlight with price=$1,299.00, before (live site):

Pricing Highlight with price=$1,299.00, after:

Ticket CTA with the default price, after (unchanged):

Pricing Highlight with the default price, after (unchanged):

Checklist

• This PR targets dev
• I was assigned the linked issue
• npm run check passes
• npm run test passes
• For a bug fix: the new test fails without my change
• Tested locally with npm run dev
• Screenshots included for visual changes
• New templates follow the Template Guidelines

[anurag629]

Thanks @prakashNalla. Check (0 errors), all 1550 tests and the build pass on top of dev, and the renders hold up: $1,299.00 now sits inside the ticket's price column and next to "/month" without touching it, $12,999.99 /year fits, a 24-character ticket price wraps neatly inside its column, and both defaults render pixel for pixel the same as the live site.