Skip to content

Fix speedtest UX: critique findings#284

Merged
itsDNNS merged 2 commits intomainfrom
fix/speedtest-critique-findings
Mar 23, 2026
Merged

Fix speedtest UX: critique findings#284
itsDNNS merged 2 commits intomainfrom
fix/speedtest-critique-findings

Conversation

@itsDNNS
Copy link
Owner

@itsDNNS itsDNNS commented Mar 23, 2026

Summary

Addresses all findings from a design critique of the speedtest view:

Bug fixes:

  • Add missing .val-bad CSS class -- below-threshold download/upload values were being classified in JS but never styled (invisible to users)
  • Fix chart grid lines using hardcoded rgba(255,255,255,0.07) -- invisible in light mode, now uses --border-subtle token
  • Fix chart font using hardcoded monospace instead of --font-mono token

UX improvements:

  • Add touch event handlers to speedtest chart for mobile tooltip interaction (was mouse-only)
  • Replace bare "No speedtest data" text with rich empty state: icon, title, description, and "Run Speedtest" CTA button
  • Show elapsed time counter on Run button during speedtest execution ("Running... 15s" instead of just "Running...")
  • Fix tooltip viewport overflow with edge detection (flips left when near right edge)
  • Cache signal detail fetches so collapsing/re-expanding a row doesn't re-fetch the API

Cleanup:

  • Remove decorative hover effect (translateY + purple glow) from chart card -- false affordance on non-interactive element
  • Build tooltip content with DOM methods instead of innerHTML
  • i18n keys added for new empty state text in all 4 languages (EN/DE/FR/ES)

Test plan

  • All 27 speedtest tests pass
  • i18n validation passes (all 39 language files in sync)
  • Dev instance builds and renders correctly
  • Verify chart tooltip works on mobile (touch)
  • Verify empty state renders when no speedtest data exists
  • Verify light mode chart grid lines are visible
  • Verify val-bad class colors below-threshold speeds red

itsDNNS added 2 commits March 23, 2026 21:24
- Add missing .val-bad CSS class (below-threshold values were unstyled)
- Add touch event handlers to chart for mobile tooltip interaction
- Replace bare "No data" text with rich empty state (icon, guidance, CTA)
- Remove decorative hover effect from chart card
- Show elapsed time counter on Run button during speedtest execution
- Use CSS tokens for chart grid lines and fonts (fixes light mode)
- Fix tooltip viewport overflow with edge detection
- Cache signal detail fetches to avoid redundant API calls
- Add i18n keys for empty state in EN/DE/FR/ES
- Build tooltip content with DOM methods instead of innerHTML
- Clear _signalCache on history reload (unbounded growth)
- Add vertical tooltip edge detection (mobile bottom-edge clipping)
- Add touchcancel handler (tooltip could stay visible)
- Move .val-bad to main.css alongside .val-warn/.val-crit (available
  even when speedtest module is disabled)
- Remove dead td.textContent assignment
@itsDNNS itsDNNS merged commit 073361d into main Mar 23, 2026
2 checks passed
@itsDNNS itsDNNS deleted the fix/speedtest-critique-findings branch March 23, 2026 20:30
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant