feat: add dynamic font sizing to event storming sticky notes (fixes #40)

[poulainpi]

Summary

Implements real-time dynamic font sizing for event storming sticky notes to prevent text overflow (fixes #40). The font size automatically scales between 10px and 16px based on text length and available space, similar to how Miro handles text in cards.

Changes

• Add calculateFontSize() helper function: Estimates optimal font size based on character width and available space
• Real-time font calculation: Font size is computed during render (no stored state) for immediate feedback while typing
• Consistent padding: Uses 8px horizontal and 16px vertical padding values
• Dynamic textWidth: Uses availableWidth variable for consistency with font size calculations

Implementation Details

The calculateFontSize function:

• Iterates through font sizes from 16px (max) to 10px (min)
• Estimates characters per line using a 0.5 ratio for the 'draw' font
• Calculates total text height with line height factor of 1.2
• Returns the largest font size that fits within available space

Test Plan

• TypeScript compilation passes
• ESLint checks pass
• Test with short text (should use 16px)
• Test with long text (should auto-reduce to fit)
• Verify real-time updates while typing

Behavior

• Short text: Uses maximum font size (16px) for readability
• Long text: Automatically reduces font size to prevent overflow
• Real-time: Font size adjusts as you type, no lag or delay
• No state storage: Font size is computed on-the-fly, making the implementation simple and maintainable

Closes #40

[cloudflare-workers-and-pages]

Deploying ddd-toolbox with    Cloudflare Pages

Latest commit:	1302f37
Status:	✅  Deploy successful!
Preview URL:	https://e4f84cad.ddd-toolbox.pages.dev
Branch Preview URL:	https://fix-issue-40-dynamic-font-si.ddd-toolbox.pages.dev

View logs