Long usernames break the UI of the home page.

[Drvanon]

The usernames do not even have to be that long for it to break.

[asharonbaltazar]

Where are you seeing this issue?

Edit: nevermind, located the issue

[asharonbaltazar]

After some playing around with the framework, it's quite evident the issue is with the components themselves, which take up unnecessary padding. Manually (never a good idea, IMO) removing the padding from one of the component divs results in something like this:

Better? Yes. The best? I don't think so. The items themselves don't take up the entire width of the container.

I've removed a component row and added a custom class for some custom CSS, which results in:

As you can see and can compare with the previous screenshot, the "Have you done it yet?" row takes up the entire width.

I'm open to any solutions, but right now, I don't want to start inserting custom (and perhaps breaking) styling. What're your thoughts?

[Drvanon]

I think making the "rows" custom components really would make sense. Adding some custom css there would make sense. We are planning on doing some wire framing soon, you can create your own suggestion in drawio if you want.

I do like the your custom solution. You could make a pull request and add maybe hendrik as a reviewer. I would like it if you can strive to use as little custom code as possible, but feel free to make it as modular (e.g. make it into it's own component if you want to).

[asharonbaltazar]

Yes, I'd wireframe rather than guess what you guys want this to look like.

[Drvanon]

Entirely reasonable, though it might take a while before we are ready with them.