Compare commits

...

1 Commits

Author SHA1 Message Date
Timmy
8c45bfd6ea feat: mobile touch polish — 44px targets, prevent double-tap zoom (#57)
Some checks failed
Accessibility Checks / a11y-audit (pull_request) Failing after 3s
Smoke Test / smoke (pull_request) Failing after 4s
- Add touch-action:manipulation to all buttons (prevents double-tap zoom)
- Remove tap highlight flash on iOS/mobile browsers
- Minimum 44px touch targets for ops, save, reset buttons on mobile
- Larger main button (48px) for primary click target on mobile
- Wrap ops buttons in 2-column grid on narrow screens

Refs: #57 Task 6 (Mobile Polish)
2026-04-12 06:12:35 -04:00

View File

@@ -46,11 +46,18 @@ body{background:var(--bg);color:var(--text);font-family:'SF Mono','Cascadia Code
.res .r-val{font-size:16px;font-weight:700;margin:2px 0;color:var(--accent)}
.res .r-rate{font-size:10px;color:var(--green)}
#main{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 16px 16px}
@media(max-width:700px){#main{grid-template-columns:1fr}}
@media(max-width:700px){
#main{grid-template-columns:1fr}
.ops-btn{min-height:44px;padding:12px 10px;font-size:12px}
.save-btn,.reset-btn{min-height:44px;padding:12px 10px;font-size:12px}
.main-btn{min-height:48px;font-size:16px}
#ops-btns{flex-wrap:wrap;gap:4px}
#ops-btns .ops-btn{flex:1 1 45%}
}
.panel{background:var(--panel);border:1px solid var(--border);border-radius:6px;padding:12px;overflow:hidden;max-height:600px;overflow-y:auto}
.panel h2{font-size:12px;font-weight:500;color:var(--accent);margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid var(--border);letter-spacing:1px;position:sticky;top:0;background:var(--panel);z-index:2}
.action-btn-group{display:flex;gap:6px;margin-bottom:8px}
.action-btn-group button{flex:1;text-align:center;font-weight:700}
.action-btn-group button{flex:1;text-align:center;font-weight:700;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.main-btn{background:linear-gradient(135deg,#1a2a3a,#0e1520);border:1px solid var(--accent);color:var(--accent);font-size:14px;padding:14px 10px;border-radius:4px;cursor:pointer;font-family:inherit;transition:all 0.2s}
.main-btn:hover{background:linear-gradient(135deg,#203040,#0e2030);box-shadow:0 0 20px var(--glow);transform:scale(1.02)}
.main-btn:active{transform:scale(0.98)}