Reworking UI Layout

For the last few days, I’ve spent my spare development time tinkering with the game UI layout to prepare for adding the events log element. There are a few elements that were originally set with absolute positioning which was always a temporary solution until a more obvious design emerges as more UI elements are added. I update the existing elements to be more responsive in a grid layout while retaining the aspect ratio of the game viewport.

A helpful CSS feature that I only recently discovered is container query length units which allows specifying length units relative to the dimensions of a query container. This is a handy way to create a responsive design without using media query breakpoints. I can even use these units with Tailwind’s arbitrary values syntax. I will continue experimenting with this feature as I rework the UI layout.

I’ll be leaving for a trip in the next few days so I won’t have much time to contribute to the project until I return.