General UI Improvements

[JuliDi]

First of all, great project and awesome documentation! Super easy to get started and very clean and clear UI.
I hope to contribute a few minor improvements to the docs soon.

Regarding the web UI there is two things I would like to improve upon and I would like to hear your opinion first, also whether PRs like that have a chance of being merged.

• General "facelift", I think the UI could become a little clearer and maybe a bit more modern with only minor changes to CSS. Especially more margin/padding might help a lot. Sometimes texts collide, buttons are very close together or form errors are not clearly visible. I have no clear vision of how it could look, so I am open for ideas. It probably makes sense to start with aforementioned small layout improvements and build upon that.
• Custom UI: if we want to use rauthy as an auth provider for our service, it would be cool if I could make it fit our general design a bit more closely. It would probably be sufficient to include custom CSS that overwrites some of the default CSS. Is this already possible somehow and I have just missed it? And if not, could this be supported and how?

Thanks!

[sebadob]

Especially more margin/padding might help a lot.

I personally hate these oversized margins and paddings in "mondern" UIs. They are wasting a lot of space and you end up scrolling all day long, when everything you need could fit on the screen.

Sometimes texts collide, buttons are very close together or form errors are not clearly visible.

I am not aware of clashing texts or issues with errors. If you have any, please either just open an issue with a screenshot, or even better a PR directly.

Custom UI: if we want to use rauthy as an auth provider for our service, it would be cool if I could make it fit our general design a bit more closely.

If the already included client branding options are not enough, you have 2 options here:

1. Overwrite only specific UI parts with the help of a reverse proxy
2. Compile and build a custom version from source

---

Of course PRs with improvements are welcome. But, as I said, I hate UIs that are wasting a lot of space just because they "try to look cool". They UI should make your work easier in the first place and not "look nice" but you need to scroll all day long because of 80px margins everywhere.
The current UI might be a bit extreme in the other direction for sure. As long as it's not completely over the top, sure, PRs are welcome.

[JuliDi]

I personally hate these oversized margins and paddings in "mondern" UIs. They are wasting a lot of space and you end up scrolling all day long, when everything you need could fit on the screen.

Don't get me wrong: I fully agree with this. In fact, I was very happy to see all available options right in the sidebar, not hidden in 5 layers of submenus. I only feel like a tiny little more space between some UI elements could improve usability.
A good example is the menu "hamburger" button in the top left.

This is already very close to the border of the browser window, which I think makes it a bit uncomfortable to use.
On smaller screens, it starts looking a bit broken even:

Regarding clashing texts: I will collect them in an issue when I have the time. It didn't happen too often, so not that big of a deal.

Anyway, thank you for being open to new UI PRs. When I make one, I will try to keep it as simple and clean as possible.

[sebadob]

This is already very close to the border of the browser window, which I think makes it a bit uncomfortable to use.
On smaller screens, it starts looking a bit broken even

This is absolutely on purpose on smaller screens. I don't care if it overlays the logo, because like it is now, it's easier to operate it with touch on a smaller phone screen. Anything else would include a layout shift down on a screen that is already super tiny.
But, if you have a better idea, feel free to submit a PR.

[JuliDi]

This makes sense. On my phone, however, this is almost unusable because swiping very close to the border is the "back" gesture, which in the Browser makes it go to the previous page. Maybe I can come up with a better solution for this.