UI Issues with the rewrite

[sleepy-evelyn]

Operating System

IpadOS & MacOS

Web Browser

Safari & Opera

Issue description

For screens that are larger than a phone but smaller than a desktop or laptop computer like a tablet, there is a significant amount of wasted space with the sidebar. Ideally, the sidebar should scale depending on the screen width but a quick fix at least is to reduce the width of the sidebar for now as it's way too wide already.

The font for code snippets is also abnormally large compared to the rest of the text which sticks out quite a bit.

Finally, this is more nitpicking but having a small menu button for mobile devices is a bit weird. Ideally this should stretch the width of the screen

[sleepy-evelyn]

I'll include the fabric wiki as an example for comparison since despite the kind of minimal design they do a good job of scaling depending on the type of device and making proper use of space.

Similarly you can see the menu button is scaled to fit the full length of the screen

[sleepy-evelyn]

More issues. Code blocks push right up against the contents making it look like they are going under it. Padding is definitely needed

[sleepy-evelyn]

Messed about with inspect element and came up with this design. Fixes most if not all the problems listed here

[sleepy-evelyn]

Some more suggested sidebar improvements. Just using google material icons. Idk if the licenses are compatible but it looks neat at least.
To implement in a simple way u could define a new icon input for the +category.yml file like so

name: pizza section
icon: local_pizza

[sleepy-evelyn]

More issues. Code blocks push right up against the contents making it look like they are going under it. Padding is definitely needed

This is now fixed in PR #58

[sleepy-evelyn]

The padding issue is semi-fixed. Still don't understand why any padding is needed at all but meh