Hello everyone!
Alongside the launcher rebuild and the Android beta, I spent today fixing something that should have been right from day one: the lakesidegamers.com website itself, on a phone. A chunk of players reach the dashboard, the signup form, the ban-appeal form, and the update notes straight from their phone — and a chunk of those pages weren't pulling their weight.
This post is a mobile-compatibility pass across the site. It's not as flashy as a new Android client, but it's the kind of work that stops being noticeable the moment it's done, which is the whole point.
The GE Dashboard, Actually Readable Now
The single most-used authenticated page on the site is the Grand Exchange multi-item dashboard — the one where you pin a grid of items and watch their prices. The dark panels looked fine on a monitor. On a phone in daylight, the min/max/median stats, the empty-state subtitle, the loading placeholder, the theme-picker "OFF" label, and the search placeholder text were all using a muted grey that was basically invisible against the panel background. The contrast ratio was about 2.6 to 1, where the accessibility floor is 4.5 to 1.
I bumped those bits of text to a lighter grey that sits comfortably above the floor, and the empty "drop an item here" slots got their alpha ramped up so you can actually tell where to aim.
If the dashboard suddenly looks more obvious on your phone — that's why. If it looked fine to you before, you were probably on a desktop, and the change won't be visible to you at all.
Forms That Fit on a 320-Pixel Screen
The signup form at /register and the ban-appeal form at /appeal both used a pattern where the body had 2 rem of padding and the card itself added another 2.5 rem horizontally. On a 320-pixel-wide phone — which is smaller than most people think, but still common — that left around 110 pixels for the actual input fields. Typing an email address into a 110-pixel box is not a good time.
Both forms now collapse their padding on mobile and expand again at tablet widths. Inputs are now 16px font-size, which is the threshold below which iOS Safari auto-zooms when you focus a field — under that threshold, the whole page jumps around the instant you tap the first box. That's been the iOS behaviour for years and it's been annoying me quietly this whole time. Fixed.
I also pushed the same pattern onto the launcher-verify page that opens when the launcher hands you a Turnstile challenge, and onto the public header on /updates, which was clipping the "Sign in / Create account" buttons off the right edge on narrow phones because the nav wasn't allowed to wrap.
Tap Targets You Can Actually Tap
The admin moderation pages are something I use from my phone a lot during live incidents. The Trust and Safety page had Lift, +24h, Approve, Deny, and Resolve buttons all at about 22 to 28 pixels tall, which is well under the recommended 44-pixel minimum for a comfortable phone tap. These are audited moderation actions — a wrong tap is a wrong ban-lift — so having them that small was legitimately bad. They're all 36 to 40 pixels now with proper padding, and the tab strip at the top got the same treatment.
Same fix applied on the user-management page (the row-expand chevron was a bare 16-pixel SVG with no padding — impossible), the client-logs viewer (level filters and session chips were the same size), the article editor (the Add-tag button), and the version manager (the Bump-minor buttons).
One Rule to Fix Every Input on the Site
This is a rather technical section — feel free to skip it if you aren't interested.
Instead of editing every raw <input> across every admin view, I added a single base-layer CSS rule that applies to all text, email, password, search, number, tel, URL, select, and textarea elements site-wide. Below 640px viewport width, they're forced to 16px font-size with a 44-pixel minimum height. At 640px and above, they go back to the tighter default of 14px / 38 pixels. This is inside Tailwind's @layer base, so any specific utility class still wins where it's applied — but where nothing's applied, the defaults are now phone-sensible.
The net effect is that every form input on the site picked up mobile ergonomics in a single commit, without me needing to hunt down the ~40 raw inputs scattered across livewire admin pages. Iterating on infrastructure beats iterating on symptoms.
The Jetstream shared form components — the primary / secondary / danger buttons and the shared input wrapper — got a parallel fix with min-h-[44px] added to their Tailwind class strings. Those cascade across login, register, reset-password, forced-password-change, profile, 2FA setup, and every Jetstream form-section view. One edit, ~20 pages.
Why Now
Honestly? Doing the Android work made it embarrassingly obvious that the website wasn't holding up its side. I was testing the mobile app on my phone, which meant I was also on my phone when I opened the admin dashboard to check something, and nothing about that experience was good. If the game client has to be first-class on a phone, the website it's glued to has to be too.
This is wave one. There's more to audit — the sprite editor admin UI I'm shipping soon, the game-data editor for player state, and probably a bunch of niche admin pages I haven't looked at closely yet. I'll keep picking at it.
Changelog:
- The GE dashboard's muted text (min/max/median stats, empty-state subtitle, theme-picker label, search placeholder) is now readable in daylight on a phone.
- The signup and ban-appeal forms now fit properly on narrow phones, and input fields no longer trigger iOS Safari's auto-zoom on focus.
- The
/updatespublic header no longer clips the Sign in / Create account buttons on a 320-pixel screen. - Trust and Safety moderation buttons (Lift, +24h, Approve, Deny, Resolve) now have proper tap targets.
- The admin users page row-expand chevron and per-row Actions dropdown are properly tappable now.
- Client-logs level filters and session chips are tap-sized.
- Version manager "Bump minor" and article editor "Add tag" buttons are properly sized.
- Every form input on the site below a tablet width now meets the 44-pixel tap-target minimum and uses 16px font-size so iOS stops auto-zooming.
- Login, register, reset-password, profile, and 2FA setup buttons all pick up the same 44-pixel minimum via the shared form components.
So what's next? More of the same. The sprite editor admin UI lands soon and I want it mobile-sensible from the start instead of fixing it in a wave two. After that, the game-data editor, which is the longest single admin page on the site and almost certainly has a few more tap targets I'll need to fatten up.
All the best, Austen