Standardize class joining pattern across components

[pglevy]

Problem

Components use inconsistent patterns for joining CSS class names, making the codebase harder to read and maintain.

Current Patterns

Pattern 1 (ButtonWidget, TagField, CardLayout)

const baseClasses = `
  inline-flex items-center justify-center gap-1
  font-medium transition-colors
  ${sizeMap[size]}
`.replace(/\s+/g, ' ').trim()

Pattern 2 (TabsField - newer, cleaner)

const baseClasses = [
  'inline-flex items-center justify-center gap-1',
  'font-medium transition-colors',
  sizeMap[size]
].filter(Boolean).join(' ')

Recommendation

Adopt the array .filter(Boolean).join(' ') pattern consistently across all components. It's:

• More readable
• Easier to conditionally include classes
• More maintainable

Affected Components

• ButtonWidget
• TagField
• CardLayout

Priority

High - improves code consistency and maintainability