This week, I worked on something quite new to me: making the admin interface mobile-friendly. The project was originally built purely for desktop, so updating it for smaller screens felt challenging, but also a really exciting learning opportunity.
Turning Desktop Tables Into Mobile-Friendly Lists
The first step was replacing Datagrid with SimpleList on small screens. Using useMediaQuery, I switched between mobile and desktop layouts automatically.
I then went through all seven list pages — Players, Events, Performances, Marks, Results, Roles, and Venues, and picked the three most important fields to show on mobile. Keeping things simple made the lists much easier to read without cluttering the small screen.
Solving the “ReferenceField Problem”
One fun (and slightly painful) surprise: SimpleList doesn’t support ReferenceField when using function-based rendering. That meant IDs would show up instead of actual names (not great).
To fix it, I used useListContext + useGetMany to fetch only the referenced records needed for the current page. Then I created a quick lookup map so each list item could display the correct names. It worked cleanly, and it kept everything fast.
I also added FilterButton and SortButton to the mobile toolbar so filtering and sorting still feel natural on smaller screens.
Making Edit Pages Work on Mobile
Some edit views (like Events, Results, Marks, and Performances) used two columns with an aside panel. On mobile, that layout doesn’t work well. Instead of removing the aside content, I moved it above the form when the screen is small. All the important info stays accessible, just in a layout that makes sense on mobile.
A New Challenge Ahead: WordPress
While working on mobile UX, I also started preparing for my next task: building a website using WordPress. I’ve never used WordPress before, so I spent some time learning the basics. It feels a bit unfamiliar, but in a good way, like a fresh challenge I’m excited to try next week.
Reflections & Insights
- Responsive design is more than shrinking screens, it’s about rethinking what matters most to the user.
- Framework limitations can be frustrating, but they also push me to find better solutions.
- A clear mobile layout makes the whole app feel more modern and accessible.
- Learning something new every week keeps this internship interesting in the best way.
What’s Coming Up
Next week, I’ll start working on the WordPress website while polishing any remaining mobile UX adjustments. It feels like another big step, but I’m ready to learn and do my best.
0 Comments