Attempting to fix layout issues

In my last devlog, I created the Create User Menu, and stated that I wasn’t a fan of how the UI looked, but would work on it after the rest of the app was done. Then I thought I knew how to fix it, so I spent some time working on the UI. I also added a text label for the input box, and docked the sidebar on the left side so other widgets won’t affect it.

Attempt 1

My idea was to take advantage of Python’s multiple inheritance and add the Horizontal container as a parent class; this would allow the Screen class to still be used for rendering, but everything would be aligned horizontally. This worked okay; it looked much like the attached screenshot. Unfortunate, the input was pushed over to the right.

Attempt 2

I didn’t like having everything pushed over to the right, so I thought that “maybe I can wrap the label and input in a Vertical container to align the label and input box; maybe that would allow them to move over and align with the docked sidebar. While the input and label did line up, it had two problems:

The input and label were still pushed over on the right side
Wrapping with a Vertical container is done with the Python “with” statement. This makes the Vertical widget capture all the events the input boxes generate

Attempt 3

Next I tried to use the grid layout. I have used the grid layout in Python Tkinter, so thought that it might be the way to go here. Using textual tcss, I setup a grid with one row and two columns, and didn’t dock the sidebar on the left. I attempted to make one column fill more of the screen than the other with grid-columns: 1fr 2fr;, unfortunately this didn’t work; this maybe could be a problem with how I read the docs; but I thought I understood how this works. They have an example of how to use the grid layout after all.

Conclusion

At this point, I have spent 49 minutes failing to make the layout look better. I was feeling frustrated, and realised that I was wasting my time. My goal is to make a Google Chat archive time machine in Dart Flutter, this is only a side part to make it easier to use and demonstrate. I fixed it up so it works, it is functional, and I am going to leave it. For real this time. Once the app is functional I might have a better idea of how to use textual to make a good UI, but my main focus should be making the main viewer.