• Mahmoud Aglan's avatar
    fix: UI sizing and spacing that did not fit real phones · 9030409a
    Mahmoud Aglan authored
    An audit of the live app at 360/390/430px found 355 measurable layout defects.
    tools/ui-audit.mjs drives the real app at those three widths and reports what is
    measurable rather than a matter of taste: horizontal overflow, tap targets below
    44px, text below a legible size, and content clipped by its own container.
    
      before  355  (tiny-text 216, tap-target 133, clipped 6)
      after     0
    
    The root cause of the size problems was not the stylesheet. /api/branding.php
    writes 181 stored values inline onto :root at runtime, overriding every token in
    tokens.css — including quick_btn_label_font 10 and hud_badge_font 9. Editing
    tokens.css alone changed nothing. The floors are now enforced in theme.js where
    the override happens, so no stored value (or future admin edit) can reintroduce
    illegible text or an unreachable control:
    
    - any *_font token is floored at 11px
    - tap-target tokens are floored at 44px
    - home_max_width, stored as 340px for a 360px phone, is treated as a floor and
      allowed to grow (min(100%, max(340px, 92vw))) instead of pinning every phone
      to the smallest one's layout
    
    Alongside that: a fluid type scale (--fs-xs … --fs-xl) and --tap-min in
    tokens.css, a tap-target floor on every control in core.css, and 53 sub-11px
    inline font sizes and 41 undersized inline button heights raised at the source.
    
    Layout fixes visible on screen:
    - the daily-gift button carried breathe-glow on the whole flex column, drawing a
      large dark rectangle across the quick-actions row. The glow belongs on the icon.
    - play home dumped its spare height as dead space above the tab bar; it now
      centres via auto margins, which does not clip when content overflows the way
      justify-content:center does.
    - the chess board left a stray "1." floating in a gap above the controls. The
      opening/material/move-list block is now hidden until there is something in it.
    
    Also adds tools/dev-server.php, which serves the app locally against the real
    Supabase so this work does not need a deploy per iteration.
    
    Multiplayer regression: tests/run.sh 5/5, and the production rehearsal passes.
    Co-Authored-By: 's avatarClaude Opus 5 (1M context) <noreply@anthropic.com>
    9030409a
leaderboard.js 3.82 KB