UI Base Overhaul

[Haruxe]

This pull request implements a plethora of base upgrades for the index.tsx.

The style is inspired from the paradigm.xyz page, and I made sure not to take too many design liberties by changing things in the base repo.

In addition, this PR brings tailwindcss - a library for css cleanup quickly, and some changes to the display peices of various Boxs and divs. The code is formatted for reading purposes, but again - I did not take too many liberties of changing anything too far out of base.

The page is a little bit more mobile friendly, but more work will need to be done with the inspection view.

[Haruxe]

Heres a snippet of what the small update looks like.

[0xsomnus]

Chad moves fr

[samczsun]

Overall this looks really good, but I think the max width needs to be unrestricted. I expect 95% of the time people will be using this on desktop, and having to scroll horizontally is a deal breaker. I'd rather force mobile users to scroll instead (which, I think personally I prefer a mobile experience that's just scrolling across a big page compared to a mobile experience that tries to be responsive but just hides everything behind 3 different clicks to expand different tabs)

(Note this image is 1920x1080 - an entire 2/3rd of the screen space is just blank)

[Haruxe]

Overall this looks really good, but I think the max width needs to be unrestricted. I expect 95% of the time people will be using this on desktop, and having to scroll horizontally is a deal breaker. I'd rather force mobile users to scroll instead (which, I think personally I prefer a mobile experience that's just scrolling across a big page compared to a mobile experience that tries to be responsive but just hides everything behind 3 different clicks to expand different tabs)

(Note this image is 1920x1080 - an entire 2/3rd of the screen space is just blank)

Right, exactly - the maximize button on the right does exactly that, expands the interface for desktop users. This screenshot just shows what it might look like for someone with a small display.

[samczsun]

ah, I forgot to click that lmao. In that case I think I might want to try and make it default if you're on desktop, but otherwise lgtm

[samczsun]

i wonder if there's a way to do this with mui's breakpoints instead

[samczsun]

I might scrap the footer since it's messing with long traces and I don't really need to advertise myself on my own website

[samczsun]

Ok, I'm gonna merge this as-is and then push my changes on top, so that way I don't stomp all over the PR/commit history. Also because since I'm not the only one touching the codebase now I should probably install a formatter so it's consistent

[Haruxe]

Ok, I'm gonna merge this as-is and then push my changes on top, so that way I don't stomp all over the PR/commit history. Also because since I'm not the only one touching the codebase now I should probably install a formatter so it's consistent

lol yea - samczsun.com i wonder who made this 🤔 And also yea the full screen should be default for sure, I getchu

[samczsun]

Hmm... been doing some more work and just realized a big problem with trying to make the trace responsive - the scrollbar isn't pinned to the bottom of the browser anymore, which means that if you're used to grabbing the horizontal scrollbar to scroll, you have to scroll all the way down to get to it

[Haruxe]

Hmm... been doing some more work and just realized a big problem with trying to make the trace responsive - the scrollbar isn't pinned to the bottom of the browser anymore, which means that if you're used to grabbing the horizontal scrollbar to scroll, you have to scroll all the way down to get to it

I think it has to do with a change I made in the globals.css to affect the overflow mode, or on the tree jsx component in index.tsx. Not sure why that problem is occurring though