The scope of this quick project will be small. This is the section of development I call "stop the bleeding". Others refer to the changes I'm about to make as the "lowest hanging fruit". Either way, here are all the changes I'm making, in order.

Believe it or not, I didn't have the responsive meta tag in place before. Adding this is the first step.

<meta name="viewport" content="width=device-width, initial-scale=1">

I didn't have any mobile breakpoints yet, but in some cases you don't need them. I just changed css width: 600px to max-width: 600px, and then made the width equal to calc(100% - 40px) for mobile. Break points will help, of course, but this is a speedrun. The login screen still needs help, but I only have 5 minutes left in my work.

I didn't get as far as I hoped. I was writing this post as I made changes, and I ended up getting stuck on the main dashboard view. But basically, I changed list elements from horizontal arrangements to vertical, and I need to remove margin and padding on mobile. On desktop, you want extra space to breath. On mobile, you want space mainly to make room for your fingers. There isn't much room on the screen to begin with, so excess whitespace on the edges can make things more cluttered, not less as on desktop. But that's all for tomorrow. I might just update this post since then since I didn't finish my goal tonight.