enlarge column resizer for better usability

[aquaductape]

Currently the column resizer, that resizes the split editor and code output is too small. It's 2px wide, this can be a little cumbersome for some users who are able to select it the first time.

This PR still keeps the original column-resizer size, but when hovered over, the element selection size is enlarged. This is done by adding CSS pseudo element. This is better than having a visually hidden padding, because you wouldn't be able to interact part of editor's scrollbar. This gif example shows the enlarged element as red, ( when it is transparent in prod ).

The column-resizer when hovered is 12px of width.

[aquaductape]

Oh yeah I added z-index 100 because, the column when hovered was overlapped by the output panel. It doesn't need to be that high, the minimal z-index to be at the top is z-index: 8. I would like your opinion if 100 value is too high.

[amoutonbrady]

Hey, that's a good idea! Like most features of the playground, this is stuff I quickly hacked together to go from idea to feature without giving much thought into it. In practice I almost never resized the plane. It also doesn't work on mobile. I'll review that one quickly!

[amoutonbrady]

I added a couple of suggestion to use tailwind utilities instead of raw CSS. That is to be coherent with the rest of the site. The less custom CSS, the better.

On your original gif there was a red background on the pseudo element as well. I take it was only to demonstrate the feature. I'm actually interested to see if that would help to add it back but with the primary color: bg-solid or bg-solid-default I believe.

[aquaductape]

Sorry it took a while, new to tailwind and I accidently pushed a modified pnpm lock file (which doesn't make sense, since I didn't install additional packages or update in this branch). But everything is resolved, I replaces raw css with tailwind utils and added solid brand color to column-resizer upon hover.

[amoutonbrady]

Sounds good, thank you!