Breaking Down [BUG] [alpha] CortexButton: Size Scale

by Jule 53 views
Breaking Down [BUG] [alpha] CortexButton: Size Scale

CortexButton’s design relies on hardcoded pixel values - like 32px height and 14px font-size - across sizes, breaking responsive consistency. This rigid approach clashes with modern scaling needs and accessibility. The button’s default secondary style shows a 32px height and 14px font-size, causing misalignment with input fields and poor zoom behavior. nnBehind the scenes, SIZE_STYLES define fixed pixels not tied to scalable tokens, locking the component to a fixed layout. This blocks adaptive theming and harms users who rely on zoom or screen readers. The real issue? Button dimensions and spacing are magic numbers, not system-driven values.nnPsychologically, this glitch undermines perceived polish - users notice accidental gaps and awkward sizing, breaking immersion. The fix? Migrate layout metrics to CSS variables, aligning height, font-size, padding, and gaps with design tokens. nnBehind the scenes, debug logs confirm the default sm size renders at 32px height and 14px font-size, a direct symptom of the hardcoded system. nnBut there is a catch: changing these values requires reworking every size variant to preserve consistent spacing and visual harmony. nnThe bottom line: CortexButton’s layout rigidity isn’t just ugly - it’s a usability flaw. When does design consistency stop being optional?