Steem Keychain Tester: Post-Phase 8 — Mobile Responsive Polish
Hello everyone,
Following the Phase 8 Deep Linking release, I am sharing a focused update on the Steem Keychain Tester — the companion web app for developers and testers.
This update fixes 8 mobile responsive issues across the entire Tester app. The goal: make the Tester fully usable on phones — not just desktops. If you're testing deep links on your phone, the Tester needs to work perfectly on that same phone.
What Was Fixed
1. Dry-Run Toggle Too Small for Mobile
The safety toggle ("Dry Run") was 40×22 pixels — too small to comfortably tap on a phone. WCAG accessibility standards require a minimum of 44px for touch targets.
Before: 40×22px — easy to miss on mobile
After: 52×30px on phones — comfortable and accessible
2. Mobile Menu — "Safety Mode" Label
When you open the hamburger menu on mobile, the Dry-Run toggle was sitting alone at the bottom with no context. You had to guess what it did.
Fix: Added a clear "Safety Mode" label next to the toggle, wrapped in a highlighted container so it stands out visually.
3. Stats Grid Cramped on Small Phones
The landing page shows three stat cards (26 Operations, 5 Categories, 2 Execution Paths). On small phones (≤479px), all three were squeezed into one row — the text was getting cut off.
Fix: On small phones, the stats now stack vertically in a clean single-column layout. Each card shows the number and label side by side, fully readable.
4. Deep Link Lab Tabs — Unreadable Text
The Deep Link Laboratory has four tabs: Builder, Raw Editor, Parser, and History. On small screens, the font was shrunk to 0.6rem (9.6px) — below the readable minimum.
Fix: Increased to 0.65rem with a 44px minimum height for comfortable tapping.
5. Hamburger Menu Button Hit Area
The hamburger menu icon had no explicit minimum width, making it inconsistent across devices.
Fix: Set to 44×44px minimum with centered alignment.
6. Code Blocks Overflowing on Mobile
Long method names like steem_keychain.requestTransfer() inside operation cards would overflow horizontally, causing unwanted page scroll.
Fix: Applied overflow-wrap: anywhere globally to all <code> elements on mobile.
7. Checkbox Touch Targets
Form checkboxes (like "Enforce" options) were default browser size (~13px) — too small on touch devices.
Fix: Increased to 18px on desktop, 22px on mobile, with 44px minimum wrapper height.
8. Operations Page Select Spacing
The "Select Operation" dropdown label was too tightly spaced from the dropdown on mobile.
Fix: Better margins and font sizing for the label.
Files Changed
| File | What Changed |
|---|---|
DryRunToggle.vue | Enlarged toggle, mobile breakpoint |
AppHeader.vue | Safety Mode label, header spacing |
index.vue | Stats grid stacking |
deep-links.vue | Tab readability |
operations.vue | Select label spacing |
OperationCard.vue | Code overflow, button sizing |
OperationForm.vue | Checkbox touch targets |
responsive.css | Global touch & code overflow rules |
8 files changed — +104 lines added, -17 removed.
Why This Matters
The Tester is the gateway for developers integrating deep links into their dApps. If a developer scans a QR code on their phone and opens the Tester to verify their deep link — the Tester needs to work flawlessly on that phone.
These fixes ensure:
- ✅ Every interactive element meets WCAG 2.5.5 touch target standards (44px minimum)
- ✅ No horizontal overflow on any page at any screen size
- ✅ All text remains readable down to 375px (iPhone SE)
- ✅ The Dry-Run safety toggle is clearly labeled and easy to find
Try It
🔗 Live: https://keychain-tester.steemhub.tech
Open it on your phone and test the mobile experience. Try toggling Dry-Run mode from the hamburger menu, browse the operations, and check the Deep Link Lab tabs.
Roadmap
| Phase | Status |
|---|---|
| Phase 1–5 — Foundation to Browser | ✅ Tested |
| Phase 6 & 7 — Full dApp Support | ✅ Tested |
| QA Stabilization — Bugs & Features | ✅ Complete |
| Phase 8 — Deep Linking & Tester | ✅ Complete |
| Tester — Mobile Responsive Fix | ✅ Shipped |
| Phase 9–11 | Upcoming |
About Me
Hi! I'm kafio, I build tools for Steem.
- PixelCraft — pixel art game on blockchain: https://pixelcraft-beta.steemhub.tech
- Steem Keychain Tester — test every Keychain operation: https://keychain-tester.steemhub.tech
- SteemHub — https://steemhub.tech
- Stats & Analytics: https://stats.steemhub.tech/
- Memory Game: https://memory-game.steemhub.tech/
Contributing to the Steem ecosystem. Support my work by voting for my witness: @kafio.wit
Vote: https://steemitwallet.com/~witnesses
Thank you!
